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

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

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

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

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

API

Sidebar API <i-sidebar>
Property Description Type Accepted Default
collapse Specifies the breakpoint at which to collapse the sidebar. String, Boolean xs, sm, md, lg, xl, true, false md
collapseOnClick Collapses the sidebar when clicking a sidebar item. Boolean true, false true
collapseOnClickOverlay Collapses the sidebar when clicking the sidebar overlay. The overlay appears only for absolute and fixed collapse positions. Boolean true, false true
collapsePosition Sets the position of the sidebar when collapsed. String relative, absolute, fixed fixed
placement Sets the placement of the sidebar to the left or to the right. String relative, absolute, fixed fixed
size Sets the size of the sidebar component. String sm, md, lg md
value Provides a way to collapse the sidebar programmatically. Should be used as part of v-model directive. Boolean true, false false
variant Sets the color variant of the sidebar component. String light, dark light