Sidebar
Composable app sidebar with collapsible rail and mobile sheet.
The Sidebar primitive is the composable shell for a left navigation rail —
brand at the top, a scrollable nav region, and a footer pinned to the bottom.
It wraps a SidebarProvider context that tracks open/collapsed state, collapses
to an icon-only rail on desktop (collapsible="icon"), and swaps to a
sheet/drawer on mobile. The sidebar dashboard shell
(components/shells/sidebar/) is built on it.
Preview
import { Home, Inbox, Search, Settings } from 'lucide-react';import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider,} from '@web/components/ui/sidebar';const items = [ { title: 'Home', icon: Home, active: true }, { title: 'Inbox', icon: Inbox, active: false }, { title: 'Search', icon: Search, active: false }, { title: 'Settings', icon: Settings, active: false },];export default function SidebarDemo() { return ( <SidebarProvider className="h-96 min-h-0 w-full overflow-hidden rounded-lg border"> <Sidebar collapsible="none" className="h-full"> <SidebarHeader className="px-3 py-2 font-semibold tracking-tight"> Acme Inc </SidebarHeader> <SidebarContent> <SidebarGroup> <SidebarGroupLabel>Platform</SidebarGroupLabel> <SidebarGroupContent> <SidebarMenu> {items.map((item) => ( <SidebarMenuItem key={item.title}> <SidebarMenuButton isActive={item.active}> <item.icon /> <span>{item.title}</span> </SidebarMenuButton> </SidebarMenuItem> ))} </SidebarMenu> </SidebarGroupContent> </SidebarGroup> </SidebarContent> <SidebarFooter className="px-3 py-2 text-sm text-muted-foreground"> ada@acme.dev </SidebarFooter> </Sidebar> <SidebarInset className="p-6"> <p className="text-sm text-muted-foreground"> Main content sits in <code>SidebarInset</code>, beside the rail. </p> </SidebarInset> </SidebarProvider> );}Import
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInset,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarProvider,
SidebarRail,
SidebarTrigger,
} from "@/components/ui/sidebar";Wrap the app in SidebarProvider, render one Sidebar beside a
SidebarInset for the main content, and place a SidebarTrigger in the header
to toggle the rail. Nav items are SidebarMenuButtons inside
SidebarMenuItems.
Props
SidebarMenuButton renders a nav entry and carries the interactive props worth
documenting — isActive for the current-route highlight, a tooltip shown
when the rail is collapsed to icons, plus variant and size. The table is
generated at build time from the real SidebarMenuButtonProps type in the
apps/web source.