Breadcrumbs
Breadcrumbs are a navigation system used to show a user's location in a site or app.
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 { Breadcrumbs } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| items * | readonly Crumb[] | — | The trail from the root to where the reader is, in that order. Each needs a label and usually an href. |
| maxItems | number | 8 | Above this the middle collapses behind an ellipsis, so a deep trail does not wrap. |
Accessibility
What the component does for you, and what it needs from you.
- The trail is a navigation landmark holding an ordered list, so it can be jumped to and its depth is announced.
- The current page is marked as current rather than only shown differently.
- A collapsed middle is reachable rather than hidden outright, so the full path is still available.