Navbar
new 3.8 kB<hk-navbar>Three presentations of one navbar. The active indicator is a single element that travels between items rather than a border that reappears on whichever item is current: one element transitioning is what makes the movement readable, and it means the motion style is a swap of which properties animate, not three implementations. Offsets are arithmetic — every item in a strip is one nth wide — so there is no ResizeObserver and nothing to go stale on a re-render.
#navbar#nav#header#menu#dock#responsive
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| items | NavItem[] | [] | Rows to render. Each takes an id, label, icon and optional badge count. |
| variant | 'pill' | 'bar' | 'dock' | 'bar' | Floating pill, full app bar, or a magnifying dock. |
| motion | 'slide' | 'glow' | 'underline' | 'slide' | What the travelling indicator animates. Ignored by dock. |
| active | string | '' | Id of the current item. Supports two-way binding via [(active)]. |
| sticky | boolean | false | Pins the bar to the top and raises it once the page scrolls. |
| breakpoint | string | '52rem' | Width below which the links collapse behind the burger. |
| speed | string | '380ms' | Indicator travel duration. Written straight to --hk-nav-speed. |
Outputs
selectedEventEmitter<string>Fires with the item id on click or keyboard select.
menuToggledEventEmitter<boolean>Fires when the mobile sheet opens or closes.
Keyboard
- ← / → Moves between items
- Home / End Jumps to the first or last item
- Enter / Space Selects the focused item
- Escape Closes the mobile sheet
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-nav-accent | #dc2626 | Indicator fill, badges and the active dock tile. |
| --hk-nav-surface | rgb(255 255 255 / 0.78) | Bar background, blurred behind the content. |
| --hk-nav-speed | 380ms | Indicator travel duration. |
| --hk-nav-ease | cubic-bezier(.34,1.4,.64,1) | Indicator easing. The slight overshoot is deliberate. |
| --hk-nav-radius | 999px | Corner radius of the bar and its items. |
Accessibility
- Renders a nav landmark with an accessible name, and marks the current item with aria-current="page".
- The burger is a toggle with aria-expanded and a label, not a bare glyph.
- Dock tiles are icon-only, so each carries its own aria-label — the tooltip is decoration and is aria-hidden.
- Badge counts are labelled ("4 new"), so a bare numeral is not read as part of the link text.
- The mobile sheet animates through grid-template-rows, which leaves it in the DOM and keeps focus order intact.
- All indicator travel is dropped under prefers-reduced-motion; the colour change alone still identifies the selection.