Wayfinding for nested pages — the ancestor path, root first, ending at the page you are on. The whole trail speaks one quiet voice — text.secondary at font.size.copy-sm — and only two things break it: a hovered link rises to text.primary, and the current page holds text.primary as static text, not a link.
The link is the only interactive part, and its states are color steps alone — no fills, underlines, or weight changes, because a weight step would widen the item and shift the trail. The current page is not a state a link passes through but a different part — text carrying aria-current="page" — and there is no disabled state: an anchor cannot be disabled, so a level with no page behind it renders as plain text in the resting tone.
| Example | State | Driver | Roles | Usage |
|---|---|---|---|---|
| Rest | — | text.secondary | An ancestor page — quiet until pointed at | |
| Hover | :hover | text.primary | The color step alone — no underline, the trail stays quiet | |
| Focus | :focus-visible | focus.ring | The shared ring on the link's radius.small box | |
| Current | [aria-current] | text.primary | The page you are on — text, not a link |
A nav landmark labeled Breadcrumb holding an ordered list on a space.2 gap — the landmark names the trail, the list conveys order and depth. Each item binds its link to a trailing i-chevron-right separator (size.icon.sm, aria-hidden, colored by inheritance) so a wrapping trail breaks between items and never strands a separator at a line start; the last item carries aria-current="page" and no link.
Clicking a crumb moves aria-current to it instead of navigating, so every level's look is inspectable — in a real trail the current page is always the last item.
A trail states where you are; it never asks anything.
| Verdict | Rule |
|---|---|
| Do | Render the current page as text with aria-current="page", never a link — a page linking to itself teaches users the trail is decoration. |
| Do | Wrap the trail in nav[aria-label="Breadcrumb"] around an ol — the landmark names the trail, the list conveys order and depth to assistive tech. |
| Do | Render the full ancestor path, root first — collapsing deep trails behind an ellipsis is layer 2; it needs Menu's behavior. |
| Don’t | Type separator characters — separators are the item's chrome, aria-hidden icons; a text slash is read aloud between every label. |
| Don’t | Render a trail on a page with no ancestors — a lone Home is furniture. |
| Don’t | Use the trail for history — breadcrumbs state where the page lives in the hierarchy; how you got there is the back button's job. |