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 |
Tokens
CSS custom properties zyra-sidebar reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-sidebar-bg | var(--zyra-color-background-elevated) | Fill color of the sidebar panel. |
Border--zyra-color-sidebar-border | var(--zyra-color-border-color) | Border color of the panel edge, and the header/footer dividers. |
Section heading--zyra-color-sidebar-heading | var(--zyra-color-foreground-subtle) | Color of a section label above a group of items. |
Item text--zyra-color-sidebar-text | var(--zyra-color-foreground-muted) | Text color of a resting, inactive item. |
Item text (hover)--zyra-color-sidebar-text-hover | var(--zyra-color-foreground) | Text color of an item on hover. |
Item background (hover)--zyra-color-sidebar-hover-bg | var(--zyra-color-surface-inset) | Fill color of an item on hover. |
Item text (active)--zyra-color-sidebar-text-active | var(--zyra-color-primary) | Text color of the active (current-page) item. |
Item background (active)--zyra-color-sidebar-active-bg | var(--zyra-color-primary-subtle) | Fill color of the active item. |
Badge background--zyra-color-sidebar-badge-bg | var(--zyra-color-primary-subtle) | Fill color of a count badge next to an item. |
Badge text--zyra-color-sidebar-badge-text | var(--zyra-color-primary) | Text color of a count badge. |
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