Components · Status and navigation

Breadcrumb Base

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.

How to add a crumb to a page. The file is components/css/breadcrumb.css.

Basic Usage

Link the shared stylesheet once per page. Never copy the rules into a page.

Step	What to do
1. Link	`<link rel="stylesheet" href="/components/css/breadcrumb.css">`. Both templates already have it.
2. A parent level	An `<a href class="breadcrumb-item">` with the page name.
3. The current page	A `<span class="breadcrumb-item breadcrumb-item--active" aria-current="page">`.
4. In a trail	Put the crumbs in a `breadcrumb__bar` with a `breadcrumb-sep` between them: see Breadcrumb Bar.

API

Classes

Class	Use
`breadcrumb-item`	The crumb: a bordered box with a label.
`breadcrumb-item--active`	The current page: bold, black, not clickable.

Things to know

The size follows the breakpoint at 769px. There is no size class.
Hover is forced on docs pages with data-state="hover". Never use that attribute in a product.
The current crumb never gets href.
A crumb is not a button: do not use button.breadcrumb-item.

CSS / Tailwind

The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.

CSS (components/css/breadcrumb.css)