COMPONENT
Crumbs
Where a page sits, and one press back to anywhere above it. Use it on anything that is not the front page — an archive, an entry inside it, a term page below that.
Three deep
The last step is the page you are on. It stays a link and says so with aria-current.
<nav aria-label="Breadcrumb">
<ol class="crumbs">
<li class="crumbs-step"><a class="crumbs-link" href="#">Home</a></li>
<li class="crumbs-step"><a class="crumbs-link" href="#">Work</a></li>
<li class="crumbs-step">
<a class="crumbs-link" href="#" aria-current="page">A bird made of clay</a>
</li>
</ol>
</nav>A one-character step
A taxonomy makes labels as short as it likes. Every step is a 24px target on BOTH axes, so `C` is still something a thumb can hit.
<nav aria-label="Breadcrumb">
<ol class="crumbs">
<li class="crumbs-step"><a class="crumbs-link" href="#">Home</a></li>
<li class="crumbs-step"><a class="crumbs-link" href="#">Work</a></li>
<li class="crumbs-step"><a class="crumbs-link" href="#" aria-current="page">C</a></li>
</ol>
</nav>Reference
Read from components/crumbs.css when this page was built, so it cannot fall behind the stylesheet.
.crumbs.crumbs-step.crumbs-link--ds-font-display--ds-gap-tight--ds-hit-min--ds-ink--ds-ink-faint--ds-ink-soft--ds-rule-strong--ds-text-ui--ds-track-noteNotes
A breadcrumb is a path, and ol is the one element that says a sequence is a sequence. A screen reader announces the count and the position, so a reader who cannot see the trail still knows how deep the page is. A row of links in a div looks identical and says nothing.
It is a ::before on every step but the first, so it is never in the markup and can never be tabbed to. That is not enough on its own: generated content is not automatically silent, and Chrome and Safari read it aloud — the obvious version of this component announces "Home slash Work slash Flatty". The rule states content: '/' / '', whose second half is empty alternative text, and states the plain version first so a browser that does not know the syntax drops one declaration rather than losing the separator entirely.
It is a / and not a › for the reason the linked work-entry title draws its arrow as a mask: this library ships no fonts and names two it does not load, so a glyph outside ASCII is a bet on what a consumer brought.
A trail of a few steps does not fit a 200px column and 200px is the atom floor. Wrapping keeps every step reachable; a scroller would hide the first one — the step that goes home, and the whole reason the component exists — behind a gesture nobody knows is available. Each link is a 24px target rather than its own line box, because the type here is small and a standalone link gets none of the exemption an inline link in a sentence does. That floor is on both axes, and the inline one is not theoretical: a term page for C drew a 10px-wide target and Go a 19px one on the day this component shipped, both under the 24px minimum. A block-size floor alone is the obvious half of the rule and the half that is never wrong on a long label — which is exactly why a short one goes unnoticed.
The focus ring comes from the base layer unchanged, rather than a second one stated here that would drift from every other ring in the system.