Breadcrumbs

Usage

Use breadcrumbs on pages three or more levels deep (Fleet › depot › vehicle type › vehicle) so people can see where they are and step back up. Don't use them on top-level pages or for step-by-step flows (use a stepper).

• Each crumb is the title of that page, sentence case, short ("North Yard depot", not "Depot details for North Yard").
• The current page comes last and is not a link.
• Above 4 levels, collapse the middle into "…"; on phones only the parent remains.

Anatomy

1. Landmark — nav.breadcrumbs[aria-label=Breadcrumb]
2. Ordered list — ol.breadcrumbs__list
3. Ancestor link — a.breadcrumbs__link
4. Separator — "/" drawn by CSS, not read aloud
5. Current page — span.breadcrumbs__current[aria-current=page]
6. Overflow (optional) — button.breadcrumbs__more + ul.breadcrumbs__overflow[popover]

Examples

States marked hover, focus-visible and active are frozen with .is-hover, .is-focus-visible, .is-active. Those classes share their rule with the real pseudo-class, so what you see is exactly what users get. Never use them in product code.

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/fleet">Fleet</a></li>
    <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/depots/north-yard">North Yard depot</a></li>
    <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/depots/north-yard/vans">Vans</a></li>
    <li class="breadcrumbs__item"><span class="breadcrumbs__current" aria-current="page">Van KX-219</span></li>
  </ol>
</nav>

<!-- Collapsed middle levels: disclosure with plain links (not role="menu") -->
<li class="breadcrumbs__item">
  <button type="button" class="breadcrumbs__more" aria-label="Show 3 more levels" aria-expanded="false"
          aria-controls="bc-more" commandfor="bc-more" command="toggle-popover" style="anchor-name:--bc-more">…</button>
  <ul class="breadcrumbs__overflow" id="bc-more" popover style="position-anchor:--bc-more">
    <li><a class="breadcrumbs__link" href="/depots/north-yard">North Yard depot</a></li>
    …
  </ul>
</li>

API

Do and don't

Accessibility

• Screen readers announce "Breadcrumb, navigation" and "list, 4 items"; separators use CSS alt text content: "/" / "", so they aren't read.
• Current page: aria-current="page" plus semibold, no underline.
• "…" has a name that says what it reveals ("Show 3 more levels").

Tokens