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. |
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.