All components
Sidebar
App navigation rails with header, grouped nav items, and a scrollable body.
Variants
sidebar
Sizes
md
Install
zsh — sidebar
1bunx stylexblocks add sidebarUsage — Base UI
sidebar.tsx
123456789101112131415161718192021222324252627282930import { Sidebar } from "#components/ui/base-ui/sidebar.tsx";import { SidebarNavItem } from "#components/ui/base-ui/sidebar-nav-item.tsx";
export function Example() { return ( // variant/mode/size resolve once on Root; every part inherits them via // context. Width comes from --sidebar-width (280px by default) — // override it with a StyleX style on Root. <Sidebar.Root variant="sidebar" mode="collapsible" size="md"> <Sidebar.Header>Acme Inc</Sidebar.Header> <Sidebar.Body> <Sidebar.Group> <Sidebar.GroupHeader> <Sidebar.GroupTitle>Workspace</Sidebar.GroupTitle> </Sidebar.GroupHeader> <Sidebar.GroupContent> <ul> <SidebarNavItem.Item> <SidebarNavItem.Button aria-current="page"> Dashboard </SidebarNavItem.Button> </SidebarNavItem.Item> </ul> </Sidebar.GroupContent> </Sidebar.Group> </Sidebar.Body> <Sidebar.Footer>{/* user menu */}</Sidebar.Footer> </Sidebar.Root> );}