Sidebar
A collapsible app-frame sidebar with groups, menus and a mobile sheet fallback.
Install
pnpm dlx shadcn@latest add @namche/sidebarUsage
import {
Sidebar,
SidebarContent,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarInset,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
} from '@/components/ui/sidebar';
<SidebarProvider>
<Sidebar>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Cluster</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive>Deployments</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SidebarInset>{/* page content */}</SidebarInset>
</SidebarProvider>Everything reads from a SidebarProvider, including the sidebar_state
cookie and the ⌘/Ctrl B toggle shortcut, so it has to wrap the
Sidebar and its SidebarInset together. collapsible is
offcanvas | icon | none: offcanvas slides fully off-screen,
icon shrinks to an icon rail, and none — used in the preview above so it
sits inline instead of fixed to the viewport — renders a plain flow
column with no collapse behaviour at all. On narrow viewports the sidebar
swaps itself for a Sheet automatically, no extra prop required.