Navigationstable

Breadcrumb

The path from site root to the current page, as an ordered list with decorative separators and aria-current on the last item.

Examples

Path

HTML for “Path”

<nav class="mp-breadcrumb" aria-label="Breadcrumb">
  <ol class="mp-breadcrumb__list">
    <li class="mp-breadcrumb__item"><a class="mp-breadcrumb__link" href="#components">Home</a></li>
    <li class="mp-breadcrumb__item"><a class="mp-breadcrumb__link" href="#components">Workshops</a></li>
    <li class="mp-breadcrumb__item"><a class="mp-breadcrumb__link" href="#components" aria-current="page">AI Literacy I</a></li>
  </ol>
</nav>

Guidance

Accessibility

<nav aria-label="Breadcrumb"> + <ol> conveys "list of 3 items" and position.
Separators are CSS with empty alt text, so they're never read aloud.
The current page link has aria-current="page".

API

Breadcrumb classes
Class	Kind
`.mp-breadcrumb`	root
`.mp-breadcrumb__list`	part of `.mp-breadcrumb`
`.mp-breadcrumb__item`	part of `.mp-breadcrumb`
`.mp-breadcrumb__link`	part of `.mp-breadcrumb`

States styled: :focus-visible :hover [aria-current="page"]. Set the native attribute or ARIA state; there are no state classes.

No component tokens: Breadcrumb reads the semantic tokens directly.

Design tokens consumed: --color-text-primary --color-text-secondary --color-text-tertiary --focus-ring --focus-ring-offset --font-sans --leading-small --radius-sm --space-2 --text-small --weight-medium

Source

README on GitHub CSS on GitHub Manifest (JSON)