Breadcrumbs
Breadcrumbs show where the user is in a site or app.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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[] | None | The path from the top level to the current page, in that order. Each item needs a label and usually an href. |
| maxItems | number | 8 | Above this number, the middle items collapse behind an ellipsis so a long trail does not wrap. |
Accessibility
What the component does for you, and what it needs from you.
- The trail is a navigation landmark containing an ordered list. Screen reader users can jump to it and hear how many levels it has.
- The current page is marked as current in code, not only styled differently.
- The collapsed middle items can still be reached, so the full path stays available.