Sidebar

A responsive navigation sidebar that includes support for branding, navigation, forms and more.

Example

Here’s an example on how to use the <i-sidebar> inside a dashboard layout. The sidebar automatically collapses responsively.

To control the visibility of the sidebar when collapsed, we will use the v-model directive.

Sidebar Example

Sidebar

Home About Contact

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Navbar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

export default {
    name: 'DashboardLayout',
    data() {
        return {
            collapsed: false
        };
    }
}

Sizes

You're able to use the size modifier to control the size of your sidebar, using one of the available sizes: sm, md, and lg. The default size is set to md.

Sidebar Sizes

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Small Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar size="sm" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Small Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar size="md" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Small Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar size="lg" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

export default {
    name: 'DashboardLayout',
    data() {
        return {
            collapsed: false
        };
    }
}

Variants

Inkline includes two predefined sidebar styles. You can set the style of a <i-sidebar> using the variant property, which can have a value of light or dark. By default, modals use the light variant.

Sidebar Variants

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar variant="light" :collapse="false">
            <i-navbar-brand>Light Sidebar</i-navbar-brand>
            <i-hamburger-menu variant="light" class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar variant="light" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar variant="dark" :collapse="false">
            <i-navbar-brand>Dark Sidebar</i-navbar-brand>
            <i-hamburger-menu variant="dark" class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar variant="dark" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

export default {
    name: 'DashboardLayout',
    data() {
        return {
            collapsed: false
        };
    }
}

Placement

You can easily place your sidebar on the right side of a layout by setting the placement property to right. By default, sidebars are on the left side.

Sidebar Placement

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Left Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar placement="left" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Right Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-layout-content></i-layout-content>
        <i-sidebar placement="right" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
    </i-layout>
</i-layout>

export default {
    name: 'DashboardLayout',
    data() {
        return {
            collapsed: false
        };
    }
}

Collapse Breakpoint

You can control what breakpoint your sidebar will collapse at using the collapse property. By default, the sidebar will collapse on the md screen size.

Collapse Breakpoint Example

Sidebar

Home About Contact

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-lg-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar collapse="lg" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

export default {
    name: 'DashboardLayout',
    data() {
        return {
            collapsed: false
        };
    }
}

Always or Never Collapsible

Besides the breakpoint values, you can use a boolean value to set your sidebar to be always collapsible, or never collapsible.

Setting a collapse value of true will set the sidebar to be always collapsible.

Always Collapsible Example

Sidebar

Home About Contact

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Sidebar</i-navbar-brand>
            <i-hamburger-menu :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar :collapse="true" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

export default {
    name: 'DashboardLayout',
    data() {
        return {
            collapsed: false
        };
    }
}

Setting a collapse value of false will set the sidebar to never be collapsible.

Never Collapsible Example

Sidebar

Home About Contact

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Sidebar</i-navbar-brand>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar :collapse="false">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

export default {
    name: 'DashboardLayout',
    data() {
        return {
            collapsed: false
        };
    }
}

Collapse Position

You can set the collapsed sidebar position to relative, absolute or fixed using the collapse-position property.

This property allows you to control whether the sidebar will affect the content that it is besides to when reaching the collapse breakpoint.

Sidebar Collapse Position

Relative Position Sidebar

Home About Contact

Layout content

Absolute Position Sidebar

Home About Contact

Layout content

Fixed Position Sidebar

Home About Contact

Layout content

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Relative Position Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar collapse-position="relative" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Absolute Position Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar collapse-position="absolute" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header class="_padding-0">
        <i-navbar :collapse="false">
            <i-navbar-brand>Fixed Position Sidebar</i-navbar-brand>
            <i-hamburger-menu class="_visible-md-and-down" :active="collapsed" @click="collapsed = !collapsed"></i-hamburger-menu>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical>
        <i-sidebar collapse-position="fixed" v-model="collapsed">
            <i-nav vertical>
                <i-nav-item to="/">Home</i-nav-item>
                <i-nav-item to="/about">About</i-nav-item>
                <i-nav-item to="/contact">Contact</i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content></i-layout-content>
    </i-layout>
</i-layout>

export default {
    name: 'DashboardLayout',
    data() {
        return {
            collapsed: false
        };
    }
}

Component API

Here you can find a list of the various customization options you can use for the sidebar components as props, as well as available slots and events.

Sidebar API

Property collapse

Type String, Boolean

Accepted xs, sm, md, lg, xl, true, false

Default md

Description Specifies the breakpoint at which to collapse the sidebar.

Property collapse-on-click

Type Boolean

Accepted true, false

Default true

Description Collapses the sidebar when clicking a sidebar item.

Property collapse-on-click-overlay

Type Boolean

Accepted true, false

Default true

Description Collapses the sidebar when clicking the sidebar overlay. The overlay appears only for absolute and fixed collapse positions.

Property collapse-position

Type String

Accepted relative, absolute, fixed

Default fixed

Description Sets the position of the sidebar when collapsed.

Property placement

Type String

Accepted relative, absolute, fixed

Default fixed

Description Sets the placement of the sidebar to the left or to the right.

Property size

Type String

Accepted sm, md, lg

Default md

Description Sets the size of the sidebar component.

Property value

Type Boolean

Accepted true, false

Default false

Description Provides a way to collapse the sidebar programmatically. Should be used as part of v-model directive.

Property variant

Type String

Accepted light, dark

Default light

Description Sets the color variant of the sidebar component.

Slot default

Description Slot for sidebar component default content.

Sass Variables

Here you can find a list of the Sass variables you can use for the sidebar components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.

Sidebar

Property $sidebar-width-base

Default 14rem

Property $sidebar-width

Default size-map($sidebar-width-base, $sizes, $size-multipliers)

Property $sidebar-padding-base

Default 0

Property $sidebar-padding

Default size-map($sidebar-padding-base, $sizes, $size-multipliers)

Property $sidebar-wrapper-transition-duration

Default $transition-duration

Property $sidebar-wrapper-transition-easing

Default $transition-easing

Property $sidebar-transition-duration

Default $transition-duration

Property $sidebar-transition-easing

Default $transition-easing

Property $sidebar-overlay-transition-duration

Default $transition-duration

Property $sidebar-overlay-transition-easing

Default $transition-easing

Property $sidebar-overlay-background

Default rgba(0, 0, 0, 0.5)

Property $sidebar-z-index

Default $z-index-fixed

Property $sidebar-color-for-light-variant

Default $color-for-light-variant

Property $sidebar-color-for-dark-variant

Default $color-for-dark-variant

Property $sidebar-variant-{variant}

Default sidebar-variant($color-{variant})

Property $sidebar-variants

Default

(
    light: $sidebar-variant-light,
    dark: $sidebar-variant-dark
)

Function sidebar-variant

Default

@function sidebar-variant($variant) {
    $sidebar-variant-color: variant-color-by-luminance($variant, $sidebar-color-for-light-variant, $sidebar-color-for-dark-variant);
    $sidebar-variant-background: $variant;

    $variant-map: (
        color: $sidebar-variant-color,
        background: $sidebar-variant-background,
    );

    @return $variant-map;
}