Collapsible navigation panel that turns into a drawer on mobile.
import { Sidebar } from "@/fragments/ui";Source<Sidebar>
<Sidebar.Header>
<Logo />
<span>Acme App</span>
</Sidebar.Header>
<Sidebar.Nav>npx @usefragments/cli add sidebarWrites src/fragments/ui/components/Sidebar plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Sidebar is a compound: import the root and reach its parts through dot notation.
Sidebar.HeaderSidebar.NavSidebar.SectionSidebar.SectionActionSidebar.ItemSidebar.SubItemSidebar.SubmenuSidebar.FooterSidebar.TriggerSidebar.OverlaySidebar.CollapseToggleSidebar.RailSidebar.MenuSkeletonSections group items; active marks the current page.
<Sidebar>
<Sidebar.Header>
<Logo />
<span>Acme App</span>
</Sidebar.Header>
<Sidebar.Nav>
<Sidebar.Section>
<Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
<Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
<Sidebar.Item icon={<UsersIcon />}>Team</Sidebar.Item>
<Sidebar.Item icon={<FolderIcon />}>Projects</Sidebar.Item>
</Sidebar.Section>
<Sidebar.Section label="Settings">
<Sidebar.Item icon={<GearIcon />}>Preferences</Sidebar.Item>
<Sidebar.Item icon={<HelpIcon />}>Help</Sidebar.Item>
</Sidebar.Section>
</Sidebar.Nav>
<Sidebar.Footer>Icon-only rail; labels move into hover tooltips.
function App() {
const [collapsed, setCollapsed] = useState(true);
return (
<Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
<Sidebar.Header collapsedContent={<Logo />}>Trailing counts for unread or pending work.
<Sidebar>
<Sidebar.Nav>
<Sidebar.Section>
<Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
<Sidebar.Item icon={<ChartIcon />} badge="3">Analytics</Sidebar.Item>
<Sidebar.Item icon={<UsersIcon />} badge="12">Team</Sidebar.Item>Nested items; defaultExpanded sets the opening state.
<Sidebar>
<Sidebar.Nav>
<Sidebar.Section>
<Sidebar.Item icon={<HomeIcon />}>Dashboard</Sidebar.Item>
{/* Use defaultExpanded for uncontrolled mode - no state needed! */}
<Sidebar.Item icon={<FolderIcon />} hasSubmenu defaultExpanded>Items switched off by permissions or feature flags.
<Sidebar>
<Sidebar.Nav>
<Sidebar.Section>
<Sidebar.Item icon={<HomeIcon />} active>Dashboard</Sidebar.Item>
<Sidebar.Item icon={<ChartIcon />}>Analytics</Sidebar.Item>
<Sidebar.Item icon={<UsersIcon />} disabled>useSidebar drives the sidebar from anywhere, plus Cmd/Ctrl+B.
function App() {
return (
<SidebarProvider>
<Stack direction="row" gap="lg" align="start">
<Sidebar>
<Sidebar.Header>Render items as your router's link component.
import Link from 'next/link';
<Sidebar>
<Sidebar.Nav>
<Sidebar.Section>
<Sidebar.Item icon={<HomeIcon />} active asChild>A section header can carry one quick action.
<Sidebar>
<Sidebar.Nav>
<Sidebar.Section
label="Projects"
action={
<Sidebar.SectionAction aria-label="Add project" onClick={handleAdd}>Placeholder rows to show while navigation data loads.
<Sidebar>
<Sidebar.Header>
<Logo />
<span>Acme App</span>
</Sidebar.Header>
<Sidebar.Nav>Drag-handle toggle on the sidebar edge — hover to reveal, click to collapse.
function App() {
const [collapsed, setCollapsed] = useState(false);
return (
<Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed}>
<Sidebar.Header collapsedContent={<Logo />}>Hides the panel entirely, leaving a floating re-open button.
function App() {
const [collapsed, setCollapsed] = useState(true);
return (
<Sidebar collapsed={collapsed} onCollapsedChange={setCollapsed} collapsible="offcanvas">
<Sidebar.Header collapsedContent={<Logo />}>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Sidebar content (use Sidebar.Header, Sidebar.Nav, Sidebar.Section, etc.) |
collapsed | boolean | Not set | Icon-only mode for desktop (controlled) |
defaultCollapsed | boolean | false | Initial collapsed state (uncontrolled) |
onCollapsedChange | function | Not set | Called when collapsed state changes |
open | boolean | Not set | Mobile drawer open state (controlled) |
defaultOpen | boolean | false | Initial open state (uncontrolled) |
onOpenChange | function | Not set | Called when open state changes |
width | string | 240px | Width of expanded sidebar |
collapsedWidth | string | var(--fui-navigation-sidebar-collapsed-width, 56px) | Width when collapsed |
position | enumleftright | left | Sidebar position |
collapsible | enumiconoffcanvasnone | icon | Collapse behavior mode |
activeIndicator | enumstartend | start | Placement of the active-item affordance |
style | object | Not set | — |