Sidebar

A high-quality, styled React sidebar component for application navigation and layout.

The Sidebar component provides an accessible, collapsible layout structure for application navigation.

Usage

import { Sidebar } from "@/components/ui/sidebar";

export function ExampleSidebar() {
  return (
    <Sidebar.Provider>
      <Sidebar.Root>
        <Sidebar.Header>
          <span>App Header</span>
          <Sidebar.Trigger />
        </Sidebar.Header>
        <Sidebar.Content>
          <Sidebar.Group>
            <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.GroupContent>
              <Sidebar.Menu>
                <Sidebar.MenuItem>
                  <Sidebar.MenuButton isActive>Dashboard</Sidebar.MenuButton>
                </Sidebar.MenuItem>
                <Sidebar.MenuItem>
                  <Sidebar.MenuButton>Settings</Sidebar.MenuButton>
                </Sidebar.MenuItem>
              </Sidebar.Menu>
            </Sidebar.GroupContent>
          </Sidebar.Group>
        </Sidebar.Content>
      </Sidebar.Root>
    </Sidebar.Provider>
  );
}

Preview

Custom Styling

Apply custom background colors, borders, or active state highlights via className:

<Sidebar.MenuButton isActive className="bg-gradient-to-r from-indigo-500/10 to-purple-500/10 text-indigo-600 dark:text-indigo-400 font-semibold">
  Dashboard
</Sidebar.MenuButton>

Styling & Class Names

Target internal sidebar CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.sidebar`	Root sidebar panel	Main sidebar drawer/panel container.
`.sidebar__header`	Header row	Header area containing brand and trigger button.
`.sidebar__content`	Content wrapper	Main scrollable menu items wrapper.
`.sidebar__group`	Navigation group	Categorized group section wrapper.
`.sidebar__group-label`	Group heading	Small muted uppercase group title label.
`.sidebar__menu`	Menu list	Unordered list for sidebar buttons.
`.sidebar__menu-button`	Interactive button	Clickable item button with active/hover states.

Anatomy

<Sidebar.Provider>
  <Sidebar.Root>
    <Sidebar.Header>
      <Sidebar.Trigger />
    </Sidebar.Header>
    <Sidebar.Content>
      <Sidebar.Group>
        <Sidebar.GroupLabel />
        <Sidebar.GroupContent>
          <Sidebar.Menu>
            <Sidebar.MenuItem>
              <Sidebar.MenuButton />
            </Sidebar.MenuItem>
          </Sidebar.Menu>
        </Sidebar.GroupContent>
      </Sidebar.Group>
    </Sidebar.Content>
    <Sidebar.Footer />
  </Sidebar.Root>
</Sidebar.Provider>

API Reference

Sidebar.Provider Props

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Initial uncontrolled open state.
`open`	`boolean`	-	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	-	Callback fired when open state changes.