Skip to content

Breadcrumbs

Stable Available in release assets

Show the current page location within a site hierarchy using a named navigation landmark and an ordered list.

Show code
<nav class="thin-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/shop/">Shop</a></li>
    <li>Field notes from cooperatives and independent workshops</li>
  </ol>
</nav>

Each authored example uses the production assets and includes copyable markup.

Linked trail

Earlier destinations remain ordinary links; the current page is plain text in the final list item.

Show code
<nav class="thin-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/shop/">Shop</a></li>
    <li>Field notes from cooperatives and independent workshops</li>
  </ol>
</nav>

Short trail

A two-step trail keeps the landmark concise without sacrificing source order.

Show code
<nav class="thin-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li>Settings</li>
  </ol>
</nav>

Long localized labels

Long destination names wrap inside the trail without breaking reading or focus order.

Show code
<nav class="thin-breadcrumbs" aria-label="Fil d'Ariane">
  <ol>
    <li><a href="/">Accueil</a></li>
    <li><a href="/boutique/">Boutique</a></li>
    <li>Carnets de terrain et ateliers indépendants</li>
  </ol>
</nav>

Anatomy

  • Named .thin-breadcrumbs landmark
  • Ordered list
  • Linked ancestor destinations
  • Current page text in the final list item

Variants and sizes

  • Linked trail — shown above
  • Short trail — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Default
  • Current page text
  • Long localized labels
  • Narrow container
  • Right-to-left content
  • 200% and 400% zoom
  • Forced colors
  • Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Every ancestor remains an ordinary link. The current page is not linked and does not receive aria-current on a list item.

Accessibility

Use nav semantics through the labelled host, keep the ordered list structure, give ancestors meaningful link text, and expose the current page as plain text in the final item. Do not rely on separators alone to communicate hierarchy.

Contract
NATIVE
Basis
Native <nav>, lists, and links; no APG widget
Evidence
  • tests/unit/library/navigation-stable.test.ts

API

Use .thin-breadcrumbs with aria-label and an inner ol. Put ancestor destinations in linked li elements and the current page in the final li without a link.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The ordered list of links and current-page text remains readable without CSS or JavaScript.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/breadcrumbs/style.ts

Stability evidence

  • Semantic breadcrumb trail, current-page text, and no-JavaScript fixture: test:tests/unit/library/components.test.ts
  • Complete item-specific API, fallback, and difficult-state documentation: test:tests/unit/library/navigation-stable.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review

Composition

Derived from the examples and style specs, not authored.

Used by