Components / Navigation
Sidebar Nav
stableA vertical navigation list for a product dashboard — light sidebar on a tinted content background (the pattern documented here; this site itself uses the dark-sidebar mode, see Foundations for both).
Default
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
items | { label: string; badge?: string }[] | — | Yes | The nav items to render. |
defaultActive | string | — | No | Label of the item marked active on first render. |
Do
- Give the active item a filled background plus a coloured left border and text — never colour alone.
- Keep badge counts to items with genuinely pending work, not decoration.
- Group related items under a section label rather than one long flat list.
Don't
- Use more than two levels of nesting — if the IA needs a third level, it needs restructuring instead.
- Change the active-item treatment between pages of the same product.