Default (Icon Collapsible)
Press Cmd+B to toggle. Collapses to icon-only mode.
With Sub-Menus and Badges
Sub-Components
| Sub-Component | Description |
|---|---|
| Sidebar.Provider | Context provider with keyboard shortcut (Cmd+B) |
| Sidebar.Trigger | Toggle button for the sidebar |
| Sidebar.Rail | Thin draggable rail to toggle sidebar |
| Sidebar.Inset | Main content area next to the sidebar |
| Sidebar.Header | Top section with branding |
| Sidebar.Content | Scrollable content area |
| Sidebar.Footer | Bottom section |
| Sidebar.Group | Groups menu items together |
| Sidebar.GroupLabel | Label for a group |
| Sidebar.GroupContent | Content wrapper for a group |
| Sidebar.Menu | Menu list container |
| Sidebar.MenuItem | Individual menu item wrapper |
| Sidebar.MenuButton | Clickable button within a menu item |
| Sidebar.MenuBadge | Badge/count indicator on a menu item |
| Sidebar.MenuSub | Sub-menu container |
| Sidebar.MenuSubItem | Sub-menu item wrapper |
| Sidebar.MenuSubButton | Clickable button within a sub-menu |
| Sidebar.Input | Search input for the sidebar |
Props
| Prop | Type | Description |
|---|---|---|
| side | "left" | "right" | Which side the sidebar appears on |
| variant | "sidebar" | "floating" | "inset" | Visual style variant |
| collapsible | "offcanvas" | "icon" | "none" | Collapse behavior |
| defaultOpen | boolean | Initial open state (Provider prop) |
| open | boolean | Controlled open state (Provider prop) |
| onOpenChange | (open: boolean) => void | Open state change handler (Provider prop) |
Usage
import { Sidebar } from "@/components/ui/Sidebar";
import { Home, Settings } from "lucide-react";
<Sidebar.Provider>
<Sidebar side="left" collapsible="icon">
<Sidebar.Header>
<span className="font-head">My App</span>
</Sidebar.Header>
<Sidebar.Content>
<Sidebar.Group>
<Sidebar.GroupLabel>Nav</Sidebar.GroupLabel>
<Sidebar.GroupContent>
<Sidebar.Menu>
<Sidebar.MenuItem>
<Sidebar.MenuButton tooltip="Home">
<Home />
<span>Home</span>
</Sidebar.MenuButton>
</Sidebar.MenuItem>
</Sidebar.Menu>
</Sidebar.GroupContent>
</Sidebar.Group>
</Sidebar.Content>
</Sidebar>
<Sidebar.Inset>
<Sidebar.Trigger />
<main>Content here</main>
</Sidebar.Inset>
</Sidebar.Provider>