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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-collapsible>
                    <i-collapsible-item title="Menu">
                        <i-nav-item to="/about">
                            Item 1
                        </i-nav-item>
                        <i-nav-item to="/about">
                            Item 2
                        </i-nav-item>
                        <i-nav-item to="/about">
                            Item 3
                        </i-nav-item>
                    </i-collapsible-item>
                </i-collapsible>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" size="sm">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Small Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" size="md">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Medium Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>


<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" size="lg">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Large Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>



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.

<i-layout>
    <i-layout-header>
        <i-navbar color="light" fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" color="light" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" color="light">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Light Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header>
        <i-navbar color="dark" fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" color="dark" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" color="dark">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Dark Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" placement="left">
            <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-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Left Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Left Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
        <i-sidebar v-model="open" placement="right">
            <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>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-collapsible>
                    <i-collapsible-item title="Menu">
                        <i-nav-item to="/about">
                            Item 1
                        </i-nav-item>
                        <i-nav-item to="/about">
                            Item 2
                        </i-nav-item>
                        <i-nav-item to="/about">
                            Item 3
                        </i-nav-item>
                    </i-collapsible-item>
                </i-collapsible>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_xl:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" collapse="lg">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" :collapse="true">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar :collapse="false">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" :collapse="true" collapse-position="relative">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar Collapse Relative
                        </h1>
                        <p>
                            Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" :collapse="true" collapse-position="absolute">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar Collapse Absolute
                        </h1>
                        <p>
                            Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open" :collapse="true" collapse-position="fixed">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    Contact
                </i-nav-item>
                <i-nav-item to="/contact">
                    Contact
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar Collapse Fixed
                        </h1>
                        <p>
                            Example content for a page with a sidebar that collapses on large screens, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand to="/">
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open">
            <i-nav vertical>
                <i-nav-item to="/">
                    Home
                </i-nav-item>
                <i-nav-item to="/about">
                    About
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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.

<i-layout>
    <i-layout-header>
        <i-navbar fluid :collapse="false">
            <i-navbar-brand>
                Dashboard
            </i-navbar-brand>
            <i-hamburger-menu v-model="open" animation="arrow-left" class="_lg:hidden" />
        </i-navbar>
    </i-layout-header>
    <i-layout vertical class="_padding-top:1/2">
        <i-sidebar v-model="open">
            <i-nav vertical>
                <i-nav-item :to="{ name: 'docs-components-sidebar' }" exact-active-class="-active">
                    Active Router Link
                </i-nav-item>
                <i-nav-item active>
                    Active Item
                </i-nav-item>
            </i-nav>
        </i-sidebar>
        <i-layout-content>
            <i-container fluid>
                <i-row>
                    <i-column>
                        <h1>
                            Sidebar
                        </h1>
                        <p>
                            Example content for a page with a sidebar, a layout typically seen in Documentation pages and Web Application dashboards.
                        </p>
                    </i-column>
                </i-row>
            </i-container>
        </i-layout-content>
    </i-layout>
</i-layout>

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