Sidebar

A responsive application sidebar with shared desktop, mobile, navigation, and trigger state.

Use Sidebar for persistent application or documentation navigation. SidebarProvider coordinates desktop collapse, the mobile drawer, triggers, and an optional global keyboard shortcut.

Navigation structure

Installation

$npx shadcn@latest add @patchui/sidebar

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/sidebar.tsx.

Usage

<SidebarProvider>
  <Sidebar rounded>
    <SidebarHeader>Workspace</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Navigation</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton active render={<Link href="/" />}>
              Overview
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    {children}
  </SidebarInset>
</SidebarProvider>

SidebarProvider must wrap Sidebar, SidebarInset, and every SidebarTrigger or useSidebar consumer. The bounded preview above demonstrates the real navigation slots without mounting the fixed Sidebar root inside the docs viewport.

Composition

SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarGroup
│   │       ├── SidebarGroupLabel
│   │       └── SidebarMenu
│   │           └── SidebarMenuItem
│   │               └── SidebarMenuButton
│   └── SidebarFooter
└── SidebarInset
    └── SidebarTrigger

API reference

Prop	Type	Default	Description
SidebarProvider.open / onOpenChange	boolean / (open: boolean) => void	-	Controls desktop visibility.
SidebarProvider.defaultOpen	boolean	true	Sets initial uncontrolled desktop visibility.
SidebarProvider.side	"left" \| "right"	"left"	Selects the desktop edge and mobile drawer side.
SidebarProvider.shortcut	string \| null	"mod+b"	Sets or disables the global toggle shortcut.
Sidebar.collapsible	"offcanvas" \| "none"	"offcanvas"	Slides closed or remains permanently visible on desktop.
Sidebar.width / topOffset	number / number	256 / 0	Sets desktop width and fixed-header offset in pixels.
SidebarMenuButton.active	boolean	false	Marks current navigation with aria-current and selected presentation.

Use Sidebar rounded for an inset surface and bordered only when a visible structural boundary is required. SidebarMenuButton render composes a router link while preserving navigation styling.

Responsive behavior

At lg and above, Sidebar is fixed while a spacer reserves its width beside SidebarInset. Below lg, the same content renders inside a Sheet drawer with separate mobile open state. SidebarTrigger toggles the appropriate state for the current viewport.

Accessibility

Render navigation destinations as links and mark only the current destination active.
SidebarMenuButton adds aria-current="page" for active navigation.
SidebarTrigger has an accessible Toggle sidebar name.
Mobile focus containment, Escape dismissal, backdrop behavior, and focus return come from Sheet.
Avoid shortcut collisions. Set shortcut={null} when the application already owns Command B or Control B.