Installation
Usage
A compact pill renders a wordmark and a Menu toggle. Activating the toggle (or pressing Esc to dismiss) springs the panel open into a grouped menu — each row pairs a label on the left with a monospace meta token on the right, and reveals a chevron on hover. A live status indicator and version number anchor the bottom of the panel. The component renders in pure theme tokens, so it inherits whatever light/dark palette is active.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
brand | ReactNode | <StackedMark/> | Custom mark rendered on the left of the top bar. |
brandLabel | string | "Index" | Wordmark text rendered next to the mark. |
sections | NavSection[] | 3 sample groups | Grouped nav items: { title?, items: { label, meta?, href?, external? }[] }. |
status | string | "Available" | Footer status label rendered next to the live indicator dot. |
version | string | "v2.4.1" | Footer version string rendered on the right. |
shortcut | string | "M" | Glyph rendered inside the kbd chip on the top bar. |
height | number | string | 560 | Height of the demo container that hosts the navbar. |
className | string | undefined | Extra classes for the outer container. |