A breadcrumb bar shows where the page sits in the site and lets the user go back up in one click. Two to six crumbs, separated by a slash.
Tokens, sizes, measurements and requirements. Values come from the live token package and from Figma: Breadcrumb Bar.
Resolved from the live token package. The crumb tokens are the same as in Breadcrumb Base; the separator is the only token of the bar itself.
| Part | Use | Token | Value |
|---|
| Breakpoint | Bar height | Crumb padding | Text | Separator height | Side padding | Extra bottom padding |
|---|---|---|---|---|---|---|
| xs (0–639px) | 56px | 6px 7px | 12/12, 0.24px | 24px | 16px | 0 |
| sm (640–768px) | 56px | 6px 7px | 12/12, 0.24px | 24px | 32px | 0 |
| md (769–1023px) | 72px | 9px 10px | 14/14, 0.28px | 32px | 32px | 8px |
| lg and xl (1024px+) | 80px | 9px 10px | 14/14, 0.28px | 32px | 40px | 16px |
The bar height is the crumb height plus 16px above and below (.breadcrumb__bar padding 16px 0). sm still looks like mobile. Side padding is always var(--px-page), never a fixed value, and never var(--px-full).
Padding of the bar, drawn on the real .breadcrumb__bar: 16px above and below the crumbs. The side padding and the extra bottom padding belong to the .breadcrumb block and are in the table. Change the Breakpoint to re-measure.
| Attribute | Value |
|---|---|
| Padding of the bar row | 16px top and bottom, none at the sides |
| Side padding of the block | var(--px-page): 16px xs, 32px sm and md, 40px lg and xl |
| Extra bottom padding of the block | 0 below 769px, 8px at md, 16px from 1024px |
| Gap between parts | 8px |
| Bar height | 56px mobile, 72px md, 80px lg and xl |
| Separator | 4px wide, 24px high on mobile, 32px on desktop |
The vertical and gap values as spacing tokens.
| Part | Value |
|---|---|
| Bar padding, top and bottom | space-16 |
| Gap between parts | space-8 |
| Side padding | var(--px-page) (the grid margin) |
| Extra bottom, md | space-8 |
| Extra bottom, lg and xl | space-16 |
The bar has no state of its own. Enabled, hover and current page belong to each crumb: see Breadcrumb Base.
| Part | Font | Size / line | Letter spacing | Weight |
|---|---|---|---|---|
| Crumb, desktop | Breuer Condensed | 14px / 14px | 0.28px | Regular 400, current 600 |
| Crumb, mobile | Breuer Condensed | 12px / 12px | 0.24px | Regular 400, current 600 |
| Separator | Breuer Condensed | 14px | 0.28px | Regular 400 |
Open points against Figma: the desktop separator is body-sm in Figma (14/20, 0.36px) and has font feature ss06; breadcrumb.css writes 0.28px and no ss06 for both sizes. Not changed here: the shared file is changed only when you ask.
| Element | Class | Notes |
|---|---|---|
| Block | breadcrumb | The nav with aria-label="Breadcrumb". Side padding var(--px-page). |
| Bar | breadcrumb__bar | Flex row, wraps, 8px gap, 16px padding above and below. |
| Crumb | breadcrumb-item | A link in a bordered box. |
| Current page | breadcrumb-item--active | The last crumb. |
| Separator | breadcrumb-sep | A “/” character. |
| Crumbs | Markup |
|---|---|
| 2 (Home, current page) | 1 link, 1 separator, 1 current |
| 3 to 6 | Parent links with a separator between each, then the current page |
The bar is as wide as the page content. The crumbs keep their own width and wrap to the next row when the row is full.
The bar does not move. Only the text color of a crumb changes on hover: see Breadcrumb Base.
| Topic | Result |
|---|---|
| Placement | First in .page, directly under the header, before the title block. The block that follows zeroes its top padding. |
| Wrapping | The crumbs wrap to a new row when the trail is too long. A crumb never wraps its label. |
| Breakpoint | The sizes change at 769px. sm looks like mobile. |
| Background | None. It takes the page background: white or, on My Pages, grey. |
| Topic | Requirement |
|---|---|
| Landmark | nav[aria-label="Breadcrumb"]. |
| Links | Every crumb but the last is an <a href>. The last is a span with aria-current="page". |
| Separator | A “/” character that adds no meaning. Hide it from screen readers when you build the markup with a list; the shipped markup keeps it as text. |
| Order | The crumbs are in DOM order from Home to the current page. |
| Focus | A visible focus ring on every link (WCAG 2.4.7). |
| Contrast | Text must reach 4.5:1 on the page background, white or grey (WCAG 1.4.3). |