Examples
Basic usage
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><span aria-current="page">Widget</span></li>
</ol>
</nav>
Custom separator
<nav class="breadcrumb" aria-label="Breadcrumb" style="--breadcrumb-separator: '\203A'">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Settings</a></li>
<li><span aria-current="page">Profile</span></li>
</ol>
</nav>
Truncation -- per-crumb
<nav
class="breadcrumb"
aria-label="Breadcrumb"
style="--breadcrumb-item-max-inline-size: 8rem"
>
<ol>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Documentation">Documentation</a></li>
<li><a href="#" title="Components">Components</a></li>
<li><a href="#" title="Forms and Inputs">Forms and Inputs</a></li>
<li>
<span aria-current="page" title="Email Validation Rules and Patterns"
>Email Validation Rules and Patterns</span
>
</li>
</ol>
</nav>
Truncation -- condensed (long trails)
<nav class="breadcrumb is-condensed" aria-label="Breadcrumb">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Acme Corp</a></li>
<li><a href="#">Engineering</a></li>
<li><a href="#">Web Platform</a></li>
<li><a href="#">Components</a></li>
<li><a href="#">Forms</a></li>
<li><a href="#">Validation</a></li>
<li><span aria-current="page">Email</span></li>
</ol>
</nav>
Source comments
Breadcrumb -- navigation path showing page hierarchy (extra).
Markup is the API: <nav> wraps <ol> wraps <li> children. Each
<li> contains either a link (<a>) for ancestor levels or
<span aria-current="page"> for the current page. No slot
classes -- the markup shape is recognizable enough that
descendant selectors carry the styling without extra hooks.
Markup:
<nav class="breadcrumb" aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li><span aria-current="page">Widget</span></li>
</ol>
</nav>
Archetype: Semantic wrapper (P3) -- ARIA + native HTML carry the
meaning (<nav landmark>, <ol> for ordered position, [aria-current]
for the current page); CSS just paints. State binds to ARIA per
P5 ([aria-current="page"] not .is-current).
Truncation -- two patterns for long trails:
1. Per-crumb truncation. Set --breadcrumb-item-max-inline-size
on the root; every link / current-page span gets
max-inline-size + text-overflow: ellipsis. Long labels
truncate; all crumbs stay visible (and wrap to multi-line
via the ol's flex-wrap).
2. .is-condensed -- container-query collapse for many-crumb
trails. At narrow container widths, all middle crumbs hide
(display: none), the visible second-to-last gets a "…"
prefix on its separator. Tradeoff: hidden items are removed
from the a11y tree at narrow widths; the full trail is
still in source for keyboard / wider-viewport users. The
a11y-perfect alternative (interactive ellipsis button)
needs JS; defer until a real consumer hits the limitation.
Reference
Source: src/css/extras/breadcrumb.css
Applies to
.breadcrumb
Classes
| Class | Kind | Description |
|---|---|---|
.is-condensed | variant | Collapses middle crumbs at narrow container widths |
Tokens
| Token | Default | Description |
|---|---|---|
--breadcrumb-gap | var(--ui-gutter-tight) | Gap between crumb items and their separators |
--breadcrumb-font-size | var(--ui-font-size-sm) | Font size for breadcrumb text |
--breadcrumb-separator | "/" | Content string used as the visual separator between crumbs |
--breadcrumb-separator-color | var(--color-text-subtle) | Color of the separator character |
--breadcrumb-item-max-inline-size | none | Maximum width per crumb before text truncation engages |