Sidebar

Anchored, collapsible panel for menu-style navigation — flat lists of icon+label rows. Left or right anchor, icon-rail or offcanvas collapse, auto mobile drawer below lg. For panels that host rich per-section content (forms, charts, inspector fields), use SidePanel instead.

Setup

Wrap the app (or the section that owns the sidebar) in <SidebarProvider>. Drop <Sidebar> anywhere in the layout; place <SidebarTrigger /> in your header or page. ⌘B / Ctrl+B toggles automatically.

Playground

Main

Toggle props on the right →

<Sidebar
  side="left"
  collapsible="offcanvas"
  width={240}
>
  <SidebarHeader>…</SidebarHeader>
  <SidebarContent>
    <SidebarGroup defaultOpen>
      <SidebarGroupLabel>Workspace</SidebarGroupLabel>
      <SidebarGroupContent>…</SidebarGroupContent>
    </SidebarGroup>
    <SidebarGroup defaultOpen={false}>
      <SidebarGroupLabel>Archived</SidebarGroupLabel>
      <SidebarGroupContent>…</SidebarGroupContent>
    </SidebarGroup>
  </SidebarContent>
  <SidebarFooter>…</SidebarFooter>
</Sidebar>

Navigation (offcanvas collapse)

Main

Click the toggle in the header to offcanvas the sidebar.

<SidebarProvider defaultOpen>
  <Sidebar side="left" collapsible="offcanvas">
    <SidebarHeader>Acme</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Workspace</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Home">
                <HomeIcon />
                <SidebarMenuLabel>Home</SidebarMenuLabel>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>v0.1.0</SidebarFooter>
  </Sidebar>
  <SidebarTrigger />
  <main>…</main>
</SidebarProvider>

Icon rail collapse

Main

Toggle to collapse into an icon rail. Labels hide; icons remain visible with native title tooltips.

<Sidebar side="left" collapsible="icon" collapsedWidth={48}>
  …
</Sidebar>

// Labels inside SidebarMenuLabel hide automatically when collapsed.
// SidebarMenuButton shrinks to a centered square and uses the
// `tooltip` prop as a native title for icon identification.

Right anchor (inspector pattern)

Main

Inspector panel anchored to the right — compose any content.

<Sidebar side="right" collapsible="offcanvas" width={280}>
  <SidebarHeader>Inspector</SidebarHeader>
  <SidebarContent>
    <SidebarGroup>
      <SidebarGroupLabel>Position</SidebarGroupLabel>
      <SidebarGroupContent>…</SidebarGroupContent>
    </SidebarGroup>
  </SidebarContent>
</Sidebar>

Nested menu (sub-items)

Main

Click Inbox / Settings to expand a sub-menu of nested items.

<SidebarMenuItem>
  <Collapsible defaultOpen>
    <CollapsibleTrigger asChild>
      <SidebarMenuButton>
        <InboxIcon />
        <SidebarMenuLabel>Inbox</SidebarMenuLabel>
        <ChevronRight className="ml-auto [[data-state=open]_&]:rotate-90" />
      </SidebarMenuButton>
    </CollapsibleTrigger>
    <CollapsibleContent>
      <SidebarMenuSub>
        <SidebarMenuSubItem>
          <SidebarMenuSubButton isActive>Important</SidebarMenuSubButton>
        </SidebarMenuSubItem>
        <SidebarMenuSubItem>
          <SidebarMenuSubButton>Sent</SidebarMenuSubButton>
        </SidebarMenuSubItem>
      </SidebarMenuSub>
    </CollapsibleContent>
  </Collapsible>
</SidebarMenuItem>

// Sub-rows are h-7 + text-sm, indented with a 1px tree-guide line.
// Auto-hides in icon-rail mode (no horizontal room for nesting).

Collapsible groups

Main

Click the section labels — Favorites and Archived collapse independently.

<SidebarGroup collapsible defaultOpen={false}>
  <SidebarGroupLabel>Archived</SidebarGroupLabel>
  <SidebarGroupContent>
    <SidebarMenu>{/* items */}</SidebarMenu>
  </SidebarGroupContent>
</SidebarGroup>

// `SidebarGroupLabel` becomes the trigger when the group is collapsible.
// A chevron rotates to reflect open state. Content animates open/close
// using the same accordion keyframes as Accordion / Collapsible.
// In icon-rail mode the label hides — content stays visible regardless.

Mobile behavior

Below the lg breakpoint (1024px), the sidebar auto-switches to an offcanvas drawer (Dialog + backdrop) regardless of the collapsible mode on desktop. This is enforced in the component — no consumer setup. See DESIGN.md §2.8 for the principle.

Composition patterns

Identity chips (workspace switcher at the top, user chip at the bottom) — drop in SidebarIdentity. Pass icon, title, optional subtitle, and a trailing chevron. Pair with DropdownMenu via asChild when the row should open a menu.

Inspector panels (Figma-style Position / Auto layout / Appearance sections) — compose with SidebarGroup collapsible. The label becomes a trigger and the content animates open/close. For richer right-side inspectors with their own header chrome, see the SidePanel family.

Props

Component	Notable props
SidebarProvider	open, onOpenChange, defaultOpen, keyboardShortcut. Must wrap Sidebar + Trigger.
Sidebar	side "left" \| "right"; collapsible "icon" \| "offcanvas" \| "none"; width, collapsedWidth; resizable, minWidth, maxWidth, onWidthChange.
SidebarTrigger	Any-placement toggle button. asChild to wrap custom UI.
SidebarHeader / Content / Footer	Flex children of Sidebar; Content auto-scrolls.
SidebarGroup	collapsible (wraps in Radix Collapsible), open, defaultOpen, onOpenChange, disabled, bordered (full-width hairline at the bottom).
SidebarGroupLabel	bordered (hairline under just the label row). Becomes the trigger when group is collapsible — auto-renders a chevron.
SidebarGroupContent	Body of a group. Auto-adds top padding when previous label is bordered, so content isn't cramped against the line.
SidebarMenu / MenuItem / MenuButton / MenuLabel	Nav list. MenuButton: isActive, tooltip, size ("sm" \| "md"), asChild.
SidebarMenuSub / SubItem / SubButton	Nested tree under a parent button. h-7 + text-sm + 1px guide line. SubButton: isActive, size, href, asChild. Auto-hides in icon-rail mode.
SidebarIdentity	Workspace / user chip — icon, title, subtitle, trailing. Pair with DropdownMenu via asChild. Auto-collapses to icon-only in icon-rail mode.
useSidebar()	Hook returning state, open, toggleSidebar, isMobile, openMobile.

Source

packages/react/src/components/sidebar.tsx · Figma node 2846:12053