A breadcrumb base is one level of a breadcrumb trail: a bordered box with a label. A parent level is a link; the current page is bold and not clickable.
Tokens, sizes, measurements, states and requirements. Values come from the live token package and from Figma: Breadcrumb Base.
Resolved from the live token package.
| State | Part | Token | Value |
|---|
| Breakpoint | Crumb padding | Text | Letter spacing | Weight |
|---|---|---|---|---|
| Mobile: xs and sm (0–768px) | 6px 7px | 12px / 12px | 0.24px | Regular 400, current 600 |
| Desktop: md, lg and xl (769px+) | 9px 10px | 14px / 14px | 0.28px | Regular 400, current 600 |
The border is 1px and is part of the box. Figma writes the current weight as Bold (700); in CSS it is 600 (Figma − 100). Sizes change at 769px and never at 640px.
Padding of the crumb. The shaded areas are the padding; the numbers are read from the real component. Change the Breakpoint to see the mobile values.
| Attribute | Value |
|---|---|
| Padding, desktop | 9px top and bottom, 10px left and right |
| Padding, mobile | 6px top and bottom, 7px left and right |
| Border | 1px, border-action-3, in the box |
| Height, desktop | 34px (14px line + 18px padding + 2px border) |
| Height, mobile | 26px (12px line + 12px padding + 2px border) |
| Corners | Square |
The paddings (6, 7, 9 and 10px) have no spacing token.
| Part | Value |
|---|---|
| Padding | 6, 7, 9 and 10px: no spacing token |
| Focus ring offset | 2px |
Hover is forced on this page; in your code it comes from :hover. Every state keeps the box and the border.
| State | Crumb | Border | Text |
|---|
Figma has Enabled, Enabled Hover and Active for each breakpoint, and no Focus or Disabled state. Focus is the shared 2px ring; a crumb is never disabled.
| Part | Font | Size / line | Letter spacing | Weight |
|---|---|---|---|---|
| Label, desktop | Breuer Condensed | 14px / 14px | 0.28px | Regular 400, current 600 |
| Label, mobile | Breuer Condensed | 12px / 12px | 0.24px | Regular 400, current 600 |
Font features ss02 and ss03 are on. Size and line height are the pair of label-sm (12/12 on mobile, 14/14 from 769px). Open point: Figma sets the letter spacing to 0.24px and 0.28px, the token has 0.48px and 0.56px; breadcrumb.css follows Figma and writes all values as pixels.
| Element | Class | Notes |
|---|---|---|
| Crumb | breadcrumb-item | An a with an href. The bordered box and the label. |
| Current page | breadcrumb-item breadcrumb-item--active | A span with aria-current="page". Bold and black. |
| Type | Markup | Use |
|---|---|---|
| Enabled / Hover | a.breadcrumb-item | A parent level. Hover comes from :hover. |
| Current page | span.breadcrumb-item--active | The last crumb. |
A crumb is as wide as its label plus the side padding. The label never wraps (white-space: nowrap).
| Property | Token | Value |
|---|---|---|
| Text color on hover | duration-fast-3 | |
| Easing | ease-standard |
The underline appears at once; only the color is animated.
| Topic | Result |
|---|---|
| Hover | Text color text-action-primary and an underline. The border does not change. |
| Focus | A 2px ring, 2px outside the box, on keyboard focus only (:focus-visible with body.keyboard-nav). |
| Current page | No hover, no underline, no pointer cursor, no focus. |
| Breakpoint | The size changes at 769px: 12/12 below, 14/14 from there. |
| Topic | Requirement |
|---|---|
| Links | Every parent crumb is an <a href>. Figma draws the hover crumb as a button; in code it is a link, because it navigates. |
| Current page | A span with aria-current="page", not a link. |
| Contrast | Text in text-tertiary on white and on grey must reach 4.5:1 (WCAG 1.4.3). The border (border-action-3) is decoration, not the only cue. |
| Target size | The box is 34px high on desktop and 26px on mobile. Keep the gap to the next crumb at 8px or more (WCAG 2.5.8). |
| Focus | A visible focus ring on every link (WCAG 2.4.7). |