Sidebar nav
stable 2.7 kB<hk-sidebar-nav>A navigation rail that collapses to icons without losing its landmarks, so muscle memory survives the collapse.
#nav#tree
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| sections | HkNavSection[] | [] | Sections, each with a label, icon and optional children. |
| collapsed | boolean | false | Collapses to the icon rail. Two-way bindable. |
| active | string | '' | Active section id. Two-way bindable. |
| overlayBelow | string | 'lg' | Breakpoint under which the rail overlays instead of pushing content. |
Outputs
activeChangeEventEmitter<string>Emits on navigation.
Keyboard
- Tab Moves through items
- Enter Navigates
- Escape Closes the overlay rail on small screens
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-nav-width | 13rem | Expanded width. |
| --hk-nav-rail | 3.25rem | Collapsed width. |
| --hk-nav-active-bg | rgb(220 38 38 / 0.10) | Active item fill. |
Accessibility
- Rendered as a nav landmark with an accessible name, so it can be jumped to directly.
- Icons keep their labels when collapsed via aria-label — the rail is never icon-only to a screen reader.
- The active item is marked aria-current, not just tinted.