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


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


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


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


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

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
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

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

Never Collapsible Example

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

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

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.