API and Development
Sidebar from @prepared911/ui/sidebar is a nav landmark. Pass a required aria-label. collapsed, defaultCollapsed, and onCollapsedChange live on Sidebar; there is no provider. Compose with SidebarHeader, SidebarContent, SidebarFooter, SidebarSection (label is the section heading), SidebarItem, SidebarGroup, SidebarNestedGroup, SidebarExpandableItem, and SidebarSeparator. Row icons are glyphs (icon), and active marks the current page.
Direct Sidebar children must appear in document order so visual layout matches keyboard and screen-reader order:
SidebarSearch (optional; settings-style sidebars)SidebarHeader (optional)SidebarContent (required)SidebarFooter (optional)SidebarSection, groups, and rows inside SidebarContent or SidebarFooter. A wrong order logs a one-time dev warning in non-production builds.
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | LocalizedMessage | — | Accessible name of the nav landmark. Required, because an application often has more than one navigation landmark. |
children | ReactNode | — | Direct children in document order: {@link SidebarSearch } (optional), {@link SidebarHeader } (optional), {@link SidebarContent }, {@link SidebarFooter } (optional). Sections and rows live inside content or footer. |
className | string | — | @deprecated Pass layout through enum props and shipped parts. Request a missing case via find-pattern. |
collapsed | boolean | — | Controlled icon-only state. |
defaultCollapsed | boolean | false | Initial icon-only state when uncontrolled. |
onCollapsedChange | SidebarCollapsedChangeHandler | — | Fires when the collapsed state is asked to change, from {@link useSidebar } or from a collapsed {@link SidebarGroup }. |
ref | Ref<HTMLElement> | — | Ref to the nav. |
SidebarSearch through packages/ui/src/components/sidebar/sidebar-search.figma.ts, and the Sidebar set's header slot uses it. Placeholder and Value are the visible copy, Filled shows the clear button, and Focus draws the focus ring for stories only. The clear button name, the empty-results copy and the accessible name are code-only. See Figma Code Connect.
defaultCollapsed starts the rail when uncontrolled. collapsed controls it. onCollapsedChange(collapsed, details) reports a request to change. useSidebar reads the nearest sidebar. The component does not render a collapse control; the owner places one outside the nav.