Sidebar

The Sidebar component can be toggled to appear from the left, right, top, or bottom edge of the viewport. The component can be used to show an overlay for navigation, shopping carts, and more.

Examples

Base

The sidebar can be positioned go appear from each side of the viewport using the position prop. Using fullwidht or fullheight, the sidebar overlaps the entire viewport width or height.

Show code

HTML

<section>
    <o-field grouped>
        <o-switch v-model="overlay" label="Overlay" />
        <o-switch v-model="fullheight" label="Fullheight" />
        <o-switch v-model="fullwidth" label="Fullwidth" />
        <o-field label="Position">
            <o-select v-model="position">
                <option value="left">Left</option>
                <option value="right">Right</option>
                <option value="top">Top</option>
                <option value="bottom">Bottom</option>
            </o-select>
        </o-field>
    </o-field>

    <o-button label="Show Sidebar" @click="active = true" />

    <o-sidebar
        v-slot="{ close }"
        v-model:active="active"
        :fullheight="fullheight"
        :fullwidth="fullwidth"
        :overlay="overlay"
        :position="position">
        <o-button
            v-if="fullwidth || fullheight || !overlay"
            icon-left="times"
            label="Close"
            @click="close()" />
        <img
            width="128"
            src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4"
            alt="Lightweight UI components for Vue.js" />
        <h3>Example</h3>
    </o-sidebar>
</section>

JS

import { ref } from "vue";

const active = ref(false);
const overlay = ref(true);
const fullheight = ref(true);
const fullwidth = ref(false);
const position = ref<"left" | "top" | "bottom" | "right">("left");

Inline

When the property inline is set, the component will be rendered in place. The appearance can be triggered with the active prop as usual.

Show code

HTML

<section class="sidebar-page">
    <div class="sidebar-layout">
        <o-sidebar
            inline
            :mobile="mobile"
            :expand-on-hover="expandOnHover"
            :reduce="reduce"
            active>
            <img
                width="128"
                src="https://avatars2.githubusercontent.com/u/66300512?s=200&v=4"
                alt="Lightweight UI components for Vue.js" />
            <section style="padding: 1em">
                <h5>Example 1</h5>
                <h5>Example 2</h5>
                <h5>Example 3</h5>
                <h5>Example 4</h5>
                <h5>Example 5</h5>
            </section>
        </o-sidebar>
    </div>

    <div class="sidebar-layout">
        <o-field>
            <o-switch v-model="reduce" label="Reduced" />
        </o-field>
        <o-field>
            <o-switch v-model="expandOnHover" label="Expand on hover" />
        </o-field>
        <br />
        <o-field label="Mobile Layout">
            <o-select v-model="mobile">
                <option :value="null"></option>
                <option value="reduced">Reduced</option>
                <option value="hidden">Hidden</option>
                <option value="expanded">Expanded</option>
            </o-select>
        </o-field>
    </div>
</section>

JS

import { ref } from "vue";

const mobile = ref<"reduced" | "expanded" | "hidden">("reduced");
const expandOnHover = ref(false);
const reduce = ref(false);

SCSS

.sidebar-page {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.sidebar-page .sidebar-layout {
    padding: 1rem;
    flex-basis: 50%;
}

Teleport

The teleport prop allows the sidebar to be "teleported" into any DOM node outside the DOM hierarchy of that component. By default, if only a boolean is passed, the sidebar will be teleported to the document body. In addition, any other destination can be passed as a value to the teleport prop.

Show code

HTML

<section>
    <o-button
        label="Open Sidebar"
        size="medium"
        variant="primary"
        @click="isActive = true" />

    <o-sidebar
        v-slot="{ close }"
        v-model:active="isActive"
        fullheight
        overlay
        teleport>
        <o-button icon-left="times" label="Close" @click="close()" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
            sodales leo nec convallis rutrum. Vivamus pharetra molestie arcu
            at dictum. Nulla faucibus leo eget enim egestas, in tempus justo
            venenatis. Duis dictum suscipit erat, a dapibus eros lobortis
            ac. Praesent tempor rhoncus convallis. Nullam in ipsum
            convallis, rutrum elit eget, dictum ipsum. Nunc sagittis aliquet
            massa. Etiam lacus sapien, eleifend non eros quis, finibus
            ornare nisl. Ut laoreet sit amet lacus non dignissim. Sed
            convallis mattis enim, sed interdum risus molestie ut. Praesent
            vel ex hendrerit, cursus lectus a, blandit felis. Nam luctus
            orci nec varius commodo.
        </p>
    </o-sidebar>
</section>

JS

import { ref } from "vue";

const isActive = ref(false);

Dynamic Component

Instead of using the default slot, the component prop allows to pass any component that will be programmatically rendered inside the sidebar. Furthermore, an inline component created with a render function can also be passed. Props and events can be passed to the component with props and events props too.

Show code

HTML

<section>
    <o-button
        label="Open Sidebar"
        size="medium"
        variant="primary"
        @click="isSidebarActive = true" />

    <o-sidebar
        v-model:active="isSidebarActive"
        :component="Form"
        :fullheight="true"
        :overlay="true" />
</section>

JS

import { ref } from "vue";
import Form from "./_sidebar-form.vue";

const isSidebarActive = ref(false);

Programmatically

This component provides a programmatic interface that can be accessed by the useOruga() composable.

Show code

HTML

<section class="odocs-spaced">
    <p>
        <o-button
            label="Open Sidebar (HTML)"
            size="medium"
            variant="primary"
            @click="imageSidebar()" />

        <o-button
            label="Open Sidebar (Component)"
            size="medium"
            variant="primary"
            @click="formSidebar()" />
    </p>
</section>

JS

import { h } from "vue";
import { useOruga } from "@oruga-ui/oruga-next";
import Form from "./_sidebar-form.vue";

const oruga = useOruga();

function imageSidebar(): void {
    const vnode = h("p", { style: { "text-align": "center" } }, [
        h("img", {
            src: "https://avatars2.githubusercontent.com/u/66300512?s=200&v=4",
        }),
    ]);
    oruga.sidebar.open({
        component: vnode,
        fullheight: true,
        overlay: true,
    });
}

function formSidebar(): void {
    oruga.sidebar.open({
        component: Form,
        fullheight: true,
        overlay: true,
    });
}

Sidebar component

A sidebar to use as overlay.

<o-sidebar></o-sidebar>

Props

Prop name	Description	Type	Values	Default
active	Whether siedbar is active or not, use v-model:active to make it two-way binding	boolean	-	false
animation	Custom animation (transition name)	string	-	From config: sidebar: {   animation: undefined }
cancelable	Is Sidebar cancleable by pressing escape or clicking outside.	boolean | string[]	escape, outside, true, false	From config: sidebar: {   cancelable: ["escape","outside"] }
clipScroll	Set true to remove the body scrollbar. When false, a non-scrollable scrollbar will be kept to avoid moving the background, but will set the body to a fixed position, which may break some layouts.	boolean	-	From config: sidebar: {   clipScroll: false }
component	Component to be injected. Close the component by emitting a 'close' event — $emit('close')	Component	-
events	Events to be binded to the injected component	{}	-
expandOnHover	Expand sidebar on hover when reduced or mobile is reduce	boolean	-	From config: sidebar: {   expandOnHover: false }
fullheight	Show sidebar in fullheight	boolean	-	From config: sidebar: {   fullheight: false }
fullwidth	Show sidebar in fullwidth	boolean	-	From config: sidebar: {   fullwidth: false }
inline	Display the Sidebear inline	boolean	-	false
mobile	Custom layout on mobile	"expanded" | "hidden" | "reduced"	expanded, reduced, hidden	From config: sidebar: {   mobile: undefined }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: sidebar: {   mobileBreakpoint: undefined }
overlay	Show an overlay like modal	boolean	-	From config: sidebar: {   overlay: false }
override	Override existing theme classes completely	boolean	-
position	Sidebar position	"bottom" | "left" | "right" | "top"	top, right, bottom, left	From config: sidebar: {   position: "left" }
props	Props to be binded to the injected component	any	-
reduce	Show a small sidebar	boolean	-	From config: sidebar: {   reduce: false }
teleport	Append the component to another part of the DOM. Set true to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used.	boolean | object | string	-	From config: sidebar: {   teleport: false }
trapFocus	Trap focus inside the sidebar	boolean	-	From config: sidebar: {   trapFocus: true }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close	value unknown - close event data	on component close event

Slots

Name	Description	Bindings
default	Sidebar default content, default is component prop	close (...args):void - function to close the component

Class Inspector

Classes applied to the element:

How does the Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns:

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link ( ▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop.

Class prop	Description	Props	Suffixes
rootClass	Class of the root element.
mobileClass	Class of the root element when on mobile. 👉 Switch to mobile view to see it in action!
activeClass	Class of the root element when active.	active
teleportClass	Class of the root element when teleported.	teleport
inlineClass	Class of the root element when inlined.	inline
overlayClass	Class of the overlay element.
contentClass	Class of the content element.
visibleClass	Class of the content element when visible.	active
hiddenClass	Class of the content element when hidden.	active
positionClass	Class of the content element with position.	position
fullheightClass	Class of the content element when fullheight.	fullheight
fullwidthClass	Class of the content element when fullwidth.	fullwidth
reduceClass	Class of the content element when reduced.	reduce
expandOnHoverClass	Class of the content element when expanded on hover.	expandOnHover
scrollClipClass	Class of the body when is visible and scroll is clipped.	clipScroll
scrollKeepClass	Class of the body when is visible and scroll is keeped.	clipScroll

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$sidebar-overlay	hsla(0, 0%, 4%, 0.86)
$sidebar-box-shadow	5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1)
$sidebar-content-background-color	var(--#{$prefix}grey-lighter)
$sidebar-border-radius	var(--#{$prefix}base-border-radius)
$sidebar-border-width	1px
$sidebar-border-color	rgba(0, 0, 0, 0.175)
$sidebar-reduced-width	80px
$sidebar-width	260px
$sidebar-zindex	100

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$sidebar-z	40
$sidebar-width	260px
$sidebar-height	260px
$sidebar-mobile-width	80px
$sidebar-colors	dv.$colors
$sidebar-background-background-color	hsla( #{css.getVar("scheme-h")}, #{css.getVar("scheme-s")}, #{css.getVar("scheme-invert-l")}, 0.86)
$sidebar-shadow	css.getVar("shadow")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$sidebar-reduced-width	10rem
$sidebar-reduced-height	10vh

See ➜ 📄 Full scss file