Navigation system
The navigation system for apps.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { SideNavigation } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| sections * | readonly NavSectionProps[] | — | The navigation, grouped. Each section takes an optional heading, its items, and the id of the selected one. |
| label * | string | — | Names the navigation landmark. It matters most when a page has more than one. |
Accessibility
What the component does for you, and what it needs from you.
- The panel is a navigation landmark with a name, so it can be jumped to and told apart from other navigation.
- The current item is marked as current rather than only coloured.
- A count beside an item is a badge, so the item itself must carry the number in its accessible name.