Breadcrumbs

Role and semantics

Breadcrumbs follow the APG breadcrumb pattern. The root <nav aria-label> is a navigation landmark containing an ordered list (<ol>). The current page is plain text, not a link, and carries aria-current="page". Separator icons sit inside aria-hidden. The landmark name comes from label; without it, “Breadcrumb” is used.

Keyboard

Key	Behaviour
Tab	Moves to the next link or the “…” button.
Enter	Follows the link or activates the “…” button.
Space	Activates the “…” button.

When the “…” button is activated the trail expands in place, the button disappears and focus moves to the first revealed link.

Focus

Links and the collapse button show a 2 px color-focus-ring ring with a 2 px offset. The ring appears only on keyboard focus (focus-visible) and shows at once, with no transition.

Screen reader output

Example	Announced
Landmark	“Breadcrumb, navigation”
Link	“First level, link”
Current page	“Current page, current page”
Collapse button	“Show hidden locations, button”

Separators are not announced. Output varies between screen readers.

Contrast

The link text (color-fg-subtle), current page text (color-fg-default) and separator icon (color-icon-subtle) meet the required contrast on their backgrounds: at least 4.5:1 for text and 3:1 for the icon. The current page is set apart not by colour alone but by having no link and by aria-current.

WCAG 2.2

Criterion	How Breadcrumbs meets it	What the product team must do
1.3.1 Info and relationships	A nav landmark, an ordered list and aria-current="page".	Order the items from the top level to the current page.
1.4.1 Use of colour	The trail is a navigation landmark, not running text: each item is a link except the current page, which is plain text with aria-current. Links turn the default text colour on hover.	Keep breadcrumbs out of running text; do not restyle the links with className.
2.1.1 Keyboard	All links and the “…” button work with the keyboard.	Do not add your own key handlers to the items.
2.4.3 Focus order	Focus moves to the revealed link; the order matches the visual order.	Do not reorder the trail.
2.4.7 Focus visible	A focus-visible ring on links and the button.	Do not remove the ring.
2.5.8 Target size (minimum)	The collapse button is 32 px.	Do not shrink the button.
4.1.2 Name, role, value	The landmark is named by label, the button by “Show hidden locations”.	When a page has more than one trail, give each a different label.