Component

Sidebar

Composable, themeable sidebar with icon-collapse, Sheet mobile drawer, and SidebarGroup / SidebarMenu primitives matching shadcn.

Usage

Wrap your layout in SidebarProvider. Compose Sidebar with SidebarHeader, SidebarContent (SidebarGroup + SidebarMenu), SidebarFooter, and SidebarRail. Wrap page content in SidebarInset.

Playground

Preview
Main content

Configure

Yes

Show the brand logo and app name in the sidebar header.

Yes

Show the search input in the sidebar header.

Code

<SidebarProvider>
  <Sidebar>
    <SidebarHeader className="gap-2 border-b p-2">
    <div className="flex items-center gap-2">
      <img src="/logo.png" alt="My App" width={28} height={28} className="object-contain" />
      <span className="font-medium text-sm">My App</span>
    </div>
    <input
      type="search"
      placeholder="Search…"
      className="h-8 w-full rounded-md border border-sidebar-border bg-sidebar-accent/60 px-2.5 text-xs"
    />
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Guides</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Getting Started" render={<Link href="/docs/getting-started" />}>
                Getting Started
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter />
    <SidebarRail />
  </Sidebar>
  <SidebarInset>{children}</SidebarInset>
</SidebarProvider>

Do

  • Wrap your root layout in SidebarProvider and place main content in SidebarInset
  • Use SidebarGroup + SidebarGroupLabel + SidebarMenu + SidebarMenuButton for navigation
  • Add SidebarRail as the last child of Sidebar for the collapse toggle rail
  • Place SidebarTrigger in the mobile header; use tooltip on menu buttons for collapsed labels

Don't

  • Don't use more than 3 nesting levels, flatten the structure instead
  • Don't put destructive actions (like 'Delete') in the nav, use a toolbar or context menu
  • Don't hardcode widths, use the --sidebar-width CSS variable so themes can override it