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.
Every example on this page is the real component, not a picture. Figma: Breadcrumb Base.
Choose a breakpoint and a state and the crumb and its code update. Hover is forced here; the crumb itself is live.
A Breadcrumb Base is one level in a breadcrumb trail: a bordered box with a short label. It is the building block of the Breadcrumb Bar. A parent level is a link; the current page is bold and black, and is not clickable.
Base has three states (Enabled, Hover and Current page) and two sizes: Mobile (up to 768px) and Desktop (769px and up). Use it on its own only to build a bar in a custom layout. A page almost always uses the whole bar.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a single crumb. Specifications holds the values: tokens, sizes, measurements, states and requirements. Code shows how to add one to a page.
Use a Base for one level of the page hierarchy:
A crumb never wraps its label and the bar is only so wide. Use the name the page already has, and shorten a long name rather than describe the page.
The last crumb shows where the user is. It has no href, no hover and no pointer cursor, so a click on it never reloads the page.
| The level is… | Use |
|---|---|
| a parent page the user can go back to | Enabled crumb: a link (a.breadcrumb-item) |
| the page the user is on | Current crumb (span.breadcrumb-item--active, aria-current="page") |
| a whole trail from Home to the current page | Breadcrumb Bar |
| a way to switch between sibling views | Tabs |
aria-current="page".border-action-3 around the label. The same border in every state. The background is transparent.The separator that sits between two crumbs is part of the Breadcrumb Bar, not of the Base.
One crumb in three states. Hover is forced on this page; in your code it comes from :hover.
A label never wraps. A very long label makes the crumb wide, so shorten it instead.
A crumb has two sizes, set by the breakpoint and never by a modifier class: Mobile (xs and sm, up to 768px) and Desktop (769px and up). A tablet (sm) looks like mobile. The values are under Sizes in Specifications.
A crumb is an inline box. The bar lines the crumbs up on one row, centered on the line, with 8px between a crumb and a separator.
The box has no background. It takes the background of the page: white on public pages and grey on My Pages pages. Colors and token names are under Design Tokens in Specifications.
Only the text changes: the color turns to text-action-primary and the text is underlined. The border and the background stay the same. The change takes duration-fast-3 with ease-standard.
A crumb that is a link shows a 2px focus ring, 2px outside the box, when it is reached with the keyboard.
The current crumb is not interactive: no hover, no underline, no focus.
All requirements are listed under Accessibility Requirements in Specifications.
A parent crumb is read as a link. The current crumb is read with its aria-current="page", so the user hears where they are. The bar around the crumbs carries the landmark name.