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.
Every example on this page is the real component, not a picture. Figma: Breadcrumb Bar and responsive behavior.
Choose a breakpoint, the number of crumbs and the current page, and the bar and its code update. Hover is forced on the first crumb; the links are live.
A breadcrumb bar shows where the page sits in the site and lets the user go back up in one click. It is a row of Breadcrumb Base crumbs with a “/” between them. Every crumb but the last is a link; the last is the current page.
The bar holds two to six crumbs and has two sizes, Mobile (up to 768px) and Desktop (769px and up). It sits directly under the header, as the first element of the page.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a breadcrumb bar. Specifications holds the values: tokens, sizes, measurements and requirements. Code shows how to add one to a page.
Use a breadcrumb bar when the page sits more than one step down the navigation tree:
The home page has no level above it, and a page directly under Home has no level in between. A bar with one crumb adds nothing.
When tabs or a clear back link already lead the user up a level, leave the bar out. Two ways to do the same thing make the page harder to read.
The separator is the “/” character. Never use an icon or a chevron between the crumbs.
| The page is… | Use |
|---|---|
| more than one step below Home | Breadcrumb bar |
| the home page, or directly under Home | No bar |
| a view that tabs or a back link already cover | No bar: avoid two |
| a single level inside the bar | Breadcrumb Base |
aria-label on the bar and aria-current on the last crumb.nav and its flex row. It wraps when the trail does not fit, and keeps 8px between its parts.text-tertiary, 4px wide, 32px high on desktop and 24px on mobile.The bar has no variant classes. What changes is the number of crumbs, from two to six, and the page background behind it.
Two to six crumbs. The last one is always the current page.
When the trail does not fit, the crumbs wrap to a second row. Each crumb stays whole and the label never wraps inside a crumb.
The bar has no background of its own: it takes the background of the page. Public pages are white. My Pages pages are grey on purpose.
background-primarybackground-secondaryThe bar has two sizes, set by the breakpoint and never by a class: Mobile (xs and sm, up to 768px) and Desktop (769px and up). The bar height, the side padding and the extra bottom padding are in the tables under Sizes in Specifications.
The bar is the first element in .page, directly under the header and before the title block or the first section. It has its own vertical padding, so the element after it zeroes its top padding: .breadcrumb + .main-content, .breadcrumb + .section and .breadcrumb + .section--first are already set in breadcrumb.css.
The crumbs start at the left page margin, var(--px-page), and run in one row. A trail that is too long wraps to the next row, aligned to the same margin.
No background, no shadow. White on public pages, grey on My Pages. Colors and token names are under Design Tokens in Specifications.
The bar is a flex row with flex-wrap: wrap. When the next crumb or separator does not fit, it moves to a new row. A crumb is never cut or shortened.
These belong to the crumb: see Breadcrumb Base.
At 769px the crumbs and the separator get larger, the bar gets taller and the extra bottom padding grows. A tablet (640–768px) looks like mobile.
All requirements are listed under Accessibility Requirements in Specifications.
The nav is announced as a landmark named “Breadcrumb”. The current page is read with aria-current="page". The “/” is only visual and is hidden from screen readers.