Sidebar

Navigation

A collapsible navigation rail that expands between icon-only and labeled states.

Sidebar manages its own collapsed state through a React context. Drop a SidebarTrigger into the header to toggle between the full width and icon-only rail.

npx shadcn@latest add sidebar

Collapsible

Click the trigger in the header to collapse and expand the rail.

Preview

Live

Content area

tsx

1<Sidebar>
2  <SidebarHeader>
3    <SidebarTrigger />
4  </SidebarHeader>
5  <SidebarContent>
6    <SidebarItem icon={House} label="Home" active />
7    <SidebarItem icon={Layers} label="Projects" />
8  </SidebarContent>
9  <SidebarFooter>
10    <SidebarItem icon={Settings} label="Settings" />
11  </SidebarFooter>
12</Sidebar>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
collapsed	boolean	Whether the sidebar is in icon-only mode.
setCollapsed	(collapsed: boolean) => void	Programmatically collapse or expand the sidebar.
icon	React.ElementType	Icon rendered by SidebarItem, hidden label when collapsed.
active	boolean= false	Applies the accent highlight to a SidebarItem.