ComponentsNavigation
Sidebar
The workspace navigation: 200px, folding to a 52px icon rail. Only its edge moves, and labels fade before the edge reaches them.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { Sidebar } from '@/ui/sidebar';<Sidebar label="Main" />Default
Expanded, 200px on the sunken surface with a hairline at its end. Items are 32px: a 16px icon, the label, and a plain count. The page you're on takes the selected fill and brand text. Replay presses the trigger, so the fold you see is the real one.
import { ChatCircleIcon, HouseIcon, PencilSimpleLineIcon, SuitcaseIcon, UsersIcon } from '@phosphor-icons/react';
import { Sidebar, SidebarGroup, SidebarItem, SidebarTrigger } from '@/ui/sidebar';
export default function SidebarDefault() {
return (
<div className="flex h-80 w-full max-w-160 overflow-hidden rounded-large border border-border bg-surface">
<Sidebar shortcut={false}>
<SidebarItem icon={<HouseIcon aria-hidden />} label="Today" current />
<SidebarItem icon={<SuitcaseIcon aria-hidden />} label="Jobs" count={12} />
<SidebarItem icon={<UsersIcon aria-hidden />} label="People" />
<SidebarGroup label="Flo">
<SidebarItem icon={<ChatCircleIcon aria-hidden />} label="Chats" />
<SidebarItem icon={<PencilSimpleLineIcon aria-hidden />} label="Drafts" count={3} />
</SidebarGroup>
<div className="flex-1" />
<SidebarTrigger data-replay />
</Sidebar>
<main className="flex-1 p-300 text-body leading-body text-text-subtle">Today</main>
</div>
);
}Folded
The 52px icon rail. Icons keep their place; labels, counts and group labels are gone, and each item keeps its label as its name and tooltip.
import { HouseIcon, SuitcaseIcon, UsersIcon } from '@phosphor-icons/react';
import { Sidebar, SidebarItem, SidebarTrigger } from '@/ui/sidebar';
export default function SidebarFolded() {
return (
<div className="flex h-64 w-full max-w-160 overflow-hidden rounded-large border border-border bg-surface">
<Sidebar defaultOpen={false} shortcut={false}>
<SidebarItem icon={<HouseIcon aria-hidden />} label="Today" />
<SidebarItem icon={<SuitcaseIcon aria-hidden />} label="Jobs" count={12} current />
<SidebarItem icon={<UsersIcon aria-hidden />} label="People" />
<div className="flex-1" />
<SidebarTrigger />
</Sidebar>
<main className="flex-1 p-300 text-body leading-body text-text-subtle">Jobs</main>
</div>
);
}