Breadcrumb

A wrapping trail of links to parent locations and the current page. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• breadcrumb, breadcrumb-list, breadcrumb-item, breadcrumb-link, breadcrumb-current

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">Home</a></li>
    <li class="breadcrumb-item"><span class="breadcrumb-current" aria-current="page">Docs</span></li>
  </ol>
</nav>

Variants and composition

breadcrumb-link is for navigable ancestors; breadcrumb-current marks the final location. Logical separators follow RTL automatically.

Behavior and accessibility

Use an ordered list inside named navigation and aria-current="page" on the final item. The separator follows writing direction. It appears only when a later sibling .breadcrumb-item is not [hidden], so the final visible item has no trailing separator.

Reference

See the interactive Storybook specimen ↗. Continue to Button or return to the Official preset overview.