ECO has two breadcrumb parts: the base, one crumb (a component), and the bar, a row of crumbs (a pattern built from it). Read this guide before you build a trail.
Choose the part below, then open the page for it: Breadcrumb Bar, Breadcrumb Base. Every example is the real component. Figma: Bar, Base and responsive behavior.
A breadcrumb shows where the page sits in the site and lets the user go back up in one click. It is made of two parts: the Breadcrumb Base, one level in a bordered box, and the Breadcrumb Bar, the row of crumbs with a slash between them. The base is a component; the bar is a pattern, because it is composed of several crumbs and the page spacing, so it is documented under Patterns.
Use it when the page sits more than one step down the navigation tree, so the user can go up a level without the browser’s back button:
This page chooses the part and shows them together. Each part has its own three pages: Examples & Guidelines, Specifications and Code. Open one from the table below or from the navigation.
A page almost always uses the bar. The base is the piece the bar is built from.
| Part | What it is, and what to use it for |
|---|---|
| Breadcrumb Bar (pattern) | A row of two to six crumbs with a “/” between them, and the page spacing. Use it for the trail at the top of a page. |
| Breadcrumb Base (component) | One level: a bordered box with a label, in three states. Use it to build a bar in a custom layout. |
The bar sits directly under the header, as the first element of the page, before the title.
The bar and the crumbs follow one interaction model.
| Topic | Result |
|---|---|
| Links | Every crumb but the last is a link. The last is the current page and is not clickable. |
| Hover | The text turns to the action color and is underlined. The border does not change. |
| Keyboard | Tab moves through the parent crumbs. Enter follows a link. |
| Wrapping | A trail that is too long wraps to the next row. A crumb never wraps its label. |
| Breakpoint | Sizes change at 769px. A tablet looks like mobile. |
A trail is built with the bar, so the separators, the spacing and the landmark are right. A single crumb on its own does not show where the user is.
var(--px-page) for the side padding.