Sidebar

Pop-up menu (settings, sign out, …); omit for a static chip.

Signature

Density

Viewport

Theme follows the navbar ☀/☾ toggle

Live demo

When to use

Pop-up menu (settings, sign out, …); omit for a static chip.

Landmark structure (header/nav/footer) with skip-to-content support. Collapsible navigation keeps an accessible name when collapsed.

const { Sidebar } = window.PrismDesignSystem_39d121;

Prop	Type	Required	Description
`side`	`"left" \| "right"`	—	Which edge it attaches to.
`hero`	`React.ReactNode`	—	Fixed header content — a hero title or avatar + metadata.
`headerExtra`	`React.ReactNode`	—	Extra header content below the hero (e.g. a search field or CTA).
`sections`	`SidebarSection[] \| SidebarNavItem[]`	Yes	Nav sections (divided); a bare item array is treated as one section.
`user`	`SidebarUser`	—	Fixed footer user chip + optional pop-up menu.
`isCollapsed`	`boolean`	—	Collapse to an icon rail (hides labels, keeps icons).
`ariaLabel`	`string`	—
`className`	`string`	—