SideNav
SideNav — Prism component.
Signature
Density
Viewport
Theme follows the navbar ☀/☾ toggleWhen to use
SideNav — Prism component.
Accessibility
Landmark structure (header/nav/footer) with skip-to-content support. Collapsible navigation keeps an accessible name when collapsed.
Import
const { SideNav } = window.PrismDesignSystem_39d121;
Props
| Prop | Type | Required | Description |
|---|---|---|---|
brand | React.ReactNode | — | Brand lockup node (logo + wordmark). |
groups | SideNavGroup[] | SideNavItem[] | Yes | Groups of links, or a flat array of items (treated as one group). |
footer | React.ReactNode | — | Footer slot, e.g. a user chip. |
collapsible | boolean | — | Show a collapse-to-rail toggle. |
isCollapsed | boolean | — | |
defaultCollapsed | boolean | — | |
onCollapsedChange | (collapsed: boolean) => void | — | |
className | string | — |