i

Breadcrumb

Navigating · researched

A trail of links showing where the current page sits in the hierarchy so a person can jump back up.

molecule · also called Breadcrumbs · contains link

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Breadcrumb native: yes antd 6.6.5
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Renders nav > ol > li with a elements and aria-hidden separators. Items can carry a dropdown menu.

docs ↗ · code ↗

Carbon

Breadcrumb native: yes @carbon/react 1.117.0
Variants
Location-based, Path-based
Sizes
small, medium
States documented
—
Accessibility guidance
yes

Renders nav with aria-label Breadcrumb, an ol of li items containing Carbon Link (a). Docs list two breadcrumb types, which differ in how the trail is populated.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/breadcrumb/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Breadcrumb"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/breadcrumb/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Breadcrumb"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

Breadcrumbs native: yes govuk-frontend 6.5.1
Variants
default, inverse, collapse on mobile
Sizes
—
States documented
default
Accessibility guidance
no

nav with aria-label containing an ol of links; aria-current on the last item when set. Options include collapseOnMobile and inverse.

docs ↗ · code ↗

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (22 files: button, checkbox, chip, dialog, divider, elevation, fab, focus-ring, icon-button, icon, list, menu, progress, radio, ripple, select, slider, switch, tabs, text-field), the repo top-level and labs directories, and docs/roadmap.md. No breadcrumb component and no roadmap entry.

Primer

Breadcrumbs native: yes @primer/react 38.40.1
Variants
—
Sizes
—
States documented
default
Accessibility guidance
yes

Renders nav > ol > li with anchors; selected item gets aria-current=page. overflow prop: wrap, menu, menu-with-root.

docs ↗ · code ↗

Spectrum

Breadcrumbs native: yes @spectrum-web-components/button 1.12.4
Variants
—
Sizes
M, L
States documented
default, hover, focus, disabled
Accessibility guidance
no

Sizes and states from the React Spectrum (rsp) page and Breadcrumbs.json; the page has no Accessibility section. Native check: S2 uses a React Aria ol and li with link anchors, and SWC 1st-gen sp-breadcrumbs uses a ul with anchors inside a role=navigation host.

docs ↗ · code ↗

USWDS

Breadcrumb native: yes @uswds/uswds 3.14.0
Variants
.usa-breadcrumb--wrap, .usa-breadcrumb--truncate
Sizes
—
States documented
default
Accessibility guidance
yes

nav with ol of anchors and aria-current=page on the last item; docs say the wrap class is now the default and has no effect.

docs ↗ · code ↗

Platform facts

Native elementnav + ol, no dedicated elementNull holds, and the HTML spec says so explicitly: section 4.14.1 'Breadcrumb navigation' (under 'Common idioms without dedicated elements') states the specification 'does not provide a machine-readable way of describing breadcrumb navigation menus' and encourages 'just use a series of links in a paragraph', with the nav element marking the section; its example is nav containing p elements with a elements separated by a glyph, and the current page as an a without href. The APG Breadcrumb page says the trail is within a navigation landmark region (labelled via aria-label or aria-labelledby) and describes it as 'a list of links'; the APG example (read from w3c/aria-practices) uses nav aria-label='Breadcrumb' with ol and li. So ol is APG-example practice, p is the spec's example. MDN nav: implicit ARIA role navigation.
Baselinenone
APG patternbreadcrumb
ARIA role—
Shipped by6 of 7 systems

Anatomy

  1. navigation landmark — APG: the breadcrumb trail is contained within a navigation landmark region, labelled via aria-label or aria-labelledby.
  2. list of links — APG: 'a list of links to the parent pages of the current page in hierarchical order'.
  3. current page — APG: the link to the current page has aria-current set to page; if the current page is not a link, aria-current is optional.

The seven states

default Static trail.
hover Pointer-only CSS state; not defined by APG or HTML.
focus Inference from native link focusability (APG Breadcrumb does not describe focus; keyboard interaction: not applicable).
active CSS :active on a link; the current page link is marked with aria-current=page.
disabled n/a — Not defined.
error n/a — Not defined.
loading n/a — Not defined.

Every cell was read twice, the second time from raw sources by a separate pass. 1 of 35 fields changed on the second read — open any “corrected” note to see what it said before.