Reactolith UI Getting Started Introduction Installation Usage Layout Aspect Ratio Card Resizable Scroll Area Separator Direction Provider Forms Button Button Group Calendar Checkbox Combobox Field Input Input Group Input OTP Label Native Select Radio Group Select Slider Switch Textarea Toggle Toggle Group Data Display Accordion Avatar Badge Carousel Chart Collapsible Item Kbd Table Feedback Alert Empty Progress Skeleton Sonner Spinner Overlay Alert Dialog Context Menu Dialog Dropdown Menu Hover Card Popover Sheet Tooltip Navigation Breadcrumb Command Menubar Navigation Menu Pagination Sidebar Tabs
shadcn/ui docs

Sidebar

A composable, themeable sidebar component for application navigation.

Preview

Usage

<ui-sidebar-provider>
  <ui-sidebar variant="inset" collapsible="icon">
    <ui-sidebar-header>
      <ui-sidebar-menu>
        <ui-sidebar-menu-item>
          <ui-sidebar-menu-button size="lg">
            <span>Acme Inc</span>
          </ui-sidebar-menu-button>
        </ui-sidebar-menu-item>
      </ui-sidebar-menu>
    </ui-sidebar-header>
    <ui-sidebar-content>
      <ui-sidebar-group>
        <ui-sidebar-group-label>Platform</ui-sidebar-group-label>
        <ui-sidebar-group-content>
          <ui-sidebar-menu>
            <ui-sidebar-menu-item>
              <ui-sidebar-menu-button is-active>Dashboard</ui-sidebar-menu-button>
            </ui-sidebar-menu-item>
            <ui-sidebar-menu-item>
              <ui-sidebar-menu-button>Projects</ui-sidebar-menu-button>
            </ui-sidebar-menu-item>
          </ui-sidebar-menu>
        </ui-sidebar-group-content>
      </ui-sidebar-group>
    </ui-sidebar-content>
    <ui-sidebar-footer>...</ui-sidebar-footer>
  </ui-sidebar>
  <ui-sidebar-inset>reactolith
    <header>
      <ui-sidebar-trigger></ui-sidebar-trigger>
      <ui-breadcrumb>...</ui-breadcrumb>
    </header>
    <main>Your page content</main>
  </ui-sidebar-inset>
</ui-sidebar-provider>

Sub-components

<ui-sidebar-provider> <ui-sidebar> <ui-sidebar-header> <ui-sidebar-content> <ui-sidebar-footer> <ui-sidebar-group> <ui-sidebar-group-label> <ui-sidebar-group-action> <ui-sidebar-group-content> <ui-sidebar-menu> <ui-sidebar-menu-item> <ui-sidebar-menu-button> <ui-sidebar-menu-action> <ui-sidebar-menu-badge> <ui-sidebar-menu-skeleton> <ui-sidebar-menu-sub> <ui-sidebar-menu-sub-item> <ui-sidebar-menu-sub-button> <ui-sidebar-trigger> <ui-sidebar-rail> <ui-sidebar-inset> <ui-sidebar-input> <ui-sidebar-separator>

Props

<ui-sidebar-provider>

PropTypeDefaultDescription
defaultOpenbooleantrueDefault open state.

<ui-sidebar>

PropTypeDefaultDescription
side"left" | "right""left"Which side.
variant"sidebar" | "floating" | "inset""sidebar"Visual variant.
collapsible"offcanvas" | "icon" | "none""offcanvas"Collapse behavior.

<ui-sidebar-menu-button> Custom wrapper

PropTypeDefaultDescription
hrefstring—URL to navigate to. Renders as a link when set. (Custom prop)
isActivebooleanfalseWhether active.

All components also accept standard HTML attributes (class, id, style, data-*, aria-*, etc.) which are passed through to the underlying element.