Breadcrumb
Shows where the current page sits in the site hierarchy: links to each parent level, then the current page.
Usage
Import the component and render it.
import { Breadcrumb } from 'src/components/Breadcrumb/Breadcrumb';
<Breadcrumb items={[{"label":"Home","href":"#"},{"label":"Category","href":"#"},{"label":"Current Page"}]} />Accessibility
Role: navigation (<nav aria-label="Breadcrumb"> with an ordered list).
| Key | Action |
|---|---|
| Tab | Moves through the links; the current page is not focusable |
| Enter | Follows the focused link |
- An <ol> inside <nav aria-label="Breadcrumb">, so screen readers announce the landmark and the number of levels.
- The current page is plain text with aria-current="page".
- The CaretRight separators are decorative (aria-hidden).
Composition
Use the following composition to build a Breadcrumb:
Breadcrumb
└── TextLink