Sidebar
A collapsible app-shell navigation rail with header/footer slots, grouped sections, and active/disabled item states.
API
All inputs and configuration options for zyra-sidebar.
| Prop | Type | Default | Description |
|---|---|---|---|
width | string | '260px' | Width of the sidebar when expanded |
collapsedWidth | string | '72px' | Width of the sidebar when collapsed |
collapsed (model) | boolean | false | Two-way collapsed state |
heading (on section) | string | '' | Optional heading label for a group of items |
active (on item) | boolean | false | Marks the item as the current page |
disabled (on item) | boolean | false | Prevents interaction with the item |
icon (on item) | ZyraIconData | null | null | Leading icon shown before the label |
badge (on item) | string | number | '' | Trailing badge, e.g. an unread count |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Sidebar items render as anchor elements with aria-current="page" when active
- Disabled items get aria-disabled and are removed from tab order
- Header and footer slots collapse to nothing in the DOM when left empty