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.
| 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 | — | Header, content, footer, and the rows they hold. |
className | string | — | Classes appended to the nav. Put overrides in @layer chroma.overrides. |
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.