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
You're able to use the
size modifier to control the size of your sidebar, using one of the available sizes:
The default size is set to
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
dark. By default, modals use the
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.
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.
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.
collapse value of
true will set the sidebar to be always collapsible.
collapse value of
false will set the sidebar to never be collapsible.
You can set the collapsed sidebar position to
fixed using the
This property allows you to control whether the sidebar will affect the content that it is besides to when reaching the collapse breakpoint.
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.
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.