Sidebar

A sidebar to use as left/right overlay or static

Examples

Base

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" :options="['left', 'right']" />
        </o-field>
    </o-field>

    <o-button label="Show" @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"
            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");

css

Inline

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="fullwidth">Fullwidth</option>
            </o-select>
        </o-field>
    </div>
</section>

JS

import { ref } from "vue";

const expandOnHover = ref(false);
const mobile = ref("reduced");
const reduce = ref(false);

SCSS

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

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

Programmatically

Show code

HTML

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

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

JS

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

const oruga = useOruga();

function imageSidebar() {
    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,
        destroyOnHide: true,
    });
}

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

css

Class props

'Classes applied to the element'

Sidebar component

A sidebar to use as left/right overlay or static

<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.	string[] | boolean	escape, outside, true, false	From config: sidebar: {   cancelable: ["escape","outside"] }
component	Component to be injected, used to open a component sidebar programmatically. Close sidebar within the component by emitting a 'close' event — emits('close')	Component	-
container	DOM element where the sidebar component will be created on (for programmatic usage).	string | HTMLElement	-	From config: sidebar: {   container: "body" }
destroyOnHide	Destroy sidebar on hide	boolean	-	From config: sidebar: {   destroyOnHide: false }
events	Events to be binded to the injected component.	object	-	{}
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	string	fullwidth, reduced, hidden	From config: sidebar: {   mobile: undefined }
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: sidebar: {   mobileBreakpoint: undefined }
onCancel	Callback function to call after user canceled (pressed escape / clicked outside)	() => void	-	Default function (see source code)
onClose	Callback function to call after close (programmatically close or user canceled)	() => void	-	Default function (see source code)
overlay	Show an overlay like modal	boolean	-	From config: sidebar: {   overlay: false }
override	Override existing theme classes completely	boolean	-
position	Sidebar position	string	top, right, bottom, left	From config: sidebar: {   position: "left" }
props	Props to be binded to the injected component.	object	-
reduce	Show a small sidebar	boolean	-	From config: sidebar: {   reduce: false }
scroll	Use clip to remove the body scrollbar, keep to have a non scrollable scrollbar to avoid shifting background, but will set body to position fixed, might break some layouts.	string	keep, clip	From config: sidebar: {   scroll: "clip" }
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|string|object	-	From config: sidebar: {   teleport: false }
variant	Color of the sidebar	string	primary, info, success, warning, danger, and any other custom color	From config: sidebar: {   variant: undefined }

Events

Event name	Properties	Description
update:active	value boolean - updated active prop	active prop two-way binding
close	value any - 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

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$sidebar-overlay	hsla(0, 0%, 4%, 0.86)
$sidebar-box-shadow	5px 0px 13px 3px rgba($black, 0.1)
$sidebar-content-background-color	$grey-lighter
$sidebar-border-radius	$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 ➜ Oruga Full

SASS Variable	Default
$sidebar-overlay	hsla(0, 0%, 4%, 0.86)
$sidebar-box-shadow	5px 0px 13px 3px rgba($black, 0.1)
$sidebar-content-background-color	$grey-lighter
$sidebar-border-radius	$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

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

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

See ➜ 📄 Full scss file