Sidebar

A composable, themeable, and customizable sidebar component.

Check Storybook for examples

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/sidebar.json

Usage

Wrap the app chrome in SidebarProvider, place a Sidebar next to SidebarInset, and compose menus with groups and menu buttons. Toggle with SidebarTrigger or Ctrl/Cmd+B.

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/sidebar/sidebar";

export function AppShell() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Application</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem>
                  <SidebarMenuButton isActive>Home</SidebarMenuButton>
                </SidebarMenuItem>
                <SidebarMenuItem>
                  <SidebarMenuButton>Settings</SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="flex h-12 items-center gap-2 border-b px-4">
          <SidebarTrigger />
          <span className="text-sm font-medium">Dashboard</span>
        </header>
        <div className="p-4">Main content</div>
      </SidebarInset>
    </SidebarProvider>
  );
}

Set collapsible on Sidebar to offcanvas, icon, or none. On viewports matching useIsMobile, the sidebar renders in a sheet.