Sidebar
A responsive navigation sidebar that includes support for branding, navigation, forms and more.
Basic Example
Here’s an example on how to use the <i-sidebar>
inside a dashboard layout. The sidebar automatically collapses responsively.
Page with Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
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
.
Small Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Medium Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Large Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
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.
Light Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Dark Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Placement
You can easily place your sidebar on the left
or right
side of a layout by setting the placement
property . By default, sidebars are on the left side.
Left Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Right Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Collapsible Menu
You can use an <i-collapsible>
component with one or more <i-collapsible-item>
components inside the <i-nav>
component to create a contextual sidebar menu.
Learn more about the Collapsible component.
Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Sidebar Collapsing
You can control at which breakpoint your sidebar will collapse at using the collapse
property. By default, the sidebar will collapse on the md
screen size, but you can use any breakpoint value.
Sidebar
Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
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.
Sidebar
Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
Setting a collapse
value of false
will set the sidebar to never be collapsible.
Sidebar
Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
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 next to it when reaching the collapse breakpoint.
Sidebar Collapse Relative
Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
Sidebar Collapse Absolute
Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
Sidebar Collapse Fixed
Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
Linking and Routing
Nav items will be automatically converted to link anchors <a>
when providing a href
property. You can also specify target
and rel
properties.
The <i-nav-item>
component is well integrated with the Vue Router plugin and will be converted to a <router-link>
when using the to
property.
Learn more about the Nav Item component.
Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Active State
You can control the active state of your <i-nav-item>
using the active
property. When you provide a to
property you’re converting the component into a router-link
, therefore you can use the active-class
and exact-active-class
properties and set them to -active
.
Learn more about the Nav Item component.
Sidebar
Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
ariaLabel
TypeString
DefaultSidebar
Description The aria-label of the sidebar - Property
collapseOnItemClick
TypeBoolean
Defaulttrue
Description Determines if the sidebar should close when clicking a sidebar item - Property
collapseOnClickOutside
TypeBoolean
Defaulttrue
Description Determines if the sidebar should close when clicking outside, on the overlay - Property
collapsePosition
Type'fixed' | 'absolute' | 'relative'
Default'absolute'
Description The collapse position of the sidebar - Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the sidebar - Property
placement
Type'left' | 'right'
Default'left'
Description The placement of the sidebar - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the navbar
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for default sidebar content
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('light')
Description The background of the sidebar component - Property
----border-top-color
Valuecolor('light-60')
Description The border top color of the sidebar component - Property
----border-right-color
Valuecolor('light-60')
Description The border right color of the sidebar component - Property
----border-bottom-color
Valuecolor('light-60')
Description The border bottom color of the sidebar component - Property
----border-left-color
Valuecolor('light-60')
Description The border left color of the sidebar component - Property
----border-color
Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
Description The border color of the sidebar component - Property
----border-style
Valuevar(--border-style)
Description The border style of the sidebar component - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the sidebar component - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the sidebar component - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the sidebar component - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the sidebar component - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the sidebar component - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the sidebar component - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the sidebar component - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the sidebar component - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the sidebar component - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the sidebar component - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the sidebar component - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the sidebar component - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the sidebar component - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the sidebar component - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the sidebar component - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the sidebar component - Property
----color
Valuecontrast-color($color-light)
Description The color of the sidebar component - Property
----font-size
Valuefont-size()
Description The font size of the sidebar component - Property
----padding-top
Valuevar(--padding-top)
Description The padding top of the sidebar component - Property
----padding-right
Valuevar(--padding-right)
Description The padding right of the sidebar component - Property
----padding-bottom
Valuevar(--padding-bottom)
Description The padding bottom of the sidebar component - Property
----padding-left
Valuevar(--padding-left)
Description The padding left of the sidebar component - Property
----padding
Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
Description The padding of the sidebar component - Property
----width
Value14rem
Description The width of the sidebar component - Property
----z-index
Valuez-index('fixed')
Description The z-index of the sidebar component - Property
----item--color
Valuecontrast-color($color-light)
Description The color of the sidebar component item - Property
----item--color--hover
Valuecontrast-color($color-light)
Description The color of the sidebar component item when hovered - Property
----item--background
Valuecolor('light')
Description The background of the sidebar component item - Property
----item--background--hover
Valuecolor('light-55')
Description The background of the sidebar component item when hovered or focused - Property
----item--border-top-left-radius
Valuevar(----border-top-left-radius)
Description The border top left radius of the sidebar component item - Property
----item--border-top-right-radius
Valuevar(----border-top-right-radius)
Description The border top right radius of the sidebar component item - Property
----item--border-bottom-right-radius
Valuevar(----border-bottom-right-radius)
Description The border bottom right radius of the sidebar component item - Property
----item--border-bottom-left-radius
Valuevar(----border-bottom-left-radius)
Description The border bottom left radius of the sidebar component item - Property
----item--border-radius
Valuevar(----item--border-top-left-radius) var(----item--border-top-right-radius) var(----item--border-bottom-right-radius) var(----item--border-bottom-left-radius)
Description The border radius of the sidebar component item - Property
----item--padding-top
Valuecalc(var(--padding-top) / 2)
Description The padding top of the sidebar component item - Property
----item--padding-right
Valuevar(--padding-right)
Description The padding right of the sidebar component item - Property
----item--padding-bottom
Valuecalc(var(--padding-bottom) / 2)
Description The padding bottom of the sidebar component item - Property
----item--padding-left
Valuevar(--padding-left)
Description The padding left of the sidebar component item - Property
----item--padding
Valuevar(----item--padding-top) var(----item--padding-right) var(----item--padding-bottom) var(----item--padding-left)
Description The padding of the sidebar component item - Property
----overlay--background
Valuergba(0, 0, 0, 0.5)
Description The background of the sidebar component overlay