Stisla

Breadcrumb

A trail of links showing where the user is inside the page hierarchy.

Basic

Wrap an ordered list in a <nav>. Mark the current page with aria-current="page". It takes the full body color while the trail stays muted.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb__item"><a href="#">Home</a></li>
    <li class="breadcrumb__item" aria-current="page">Library</li>
  </ol>
</nav>

Multiple levels

Any number of crumbs work. The default chevron sits between each item.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb__item"><a href="#">Home</a></li>
    <li class="breadcrumb__item"><a href="#">Library</a></li>
    <li class="breadcrumb__item" aria-current="page">Data</li>
  </ol>
</nav>

With icon

Drop a <svg> or <i> inside the link. It pins to --breadcrumb-icon-size and tracks the crumb's color through hover.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb__item">
      <a href="#">
        <i data-lucide="house"></i>
        <span>Home</span>
      </a>
    </li>
    <li class="breadcrumb__item"><a href="#">Library</a></li>
    <li class="breadcrumb__item" aria-current="page">Data</li>
  </ol>
</nav>

String divider

Override --breadcrumb-divider on the wrapper to swap the chevron for any string.

<nav style="--breadcrumb-divider: '/';" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb__item"><a href="#">Home</a></li>
    <li class="breadcrumb__item"><a href="#">Library</a></li>
    <li class="breadcrumb__item" aria-current="page">Data</li>
  </ol>
</nav>

Embedded SVG divider

Use a URL-encoded SVG to drop in any glyph. Bake the stroke or fill tone in hex. Browsers parse data-URL SVGs in their own context, so currentColor and CSS vars inside the SVG don't track the trail color. Pick a tone that reads in both themes, or use a Unicode glyph instead.

<nav style="--breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 4h8M5 1l3 3-3 3' fill='none' stroke='%23999' stroke-width='1'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb__item"><a href="#">Home</a></li>
    <li class="breadcrumb__item"><a href="#">Library</a></li>
    <li class="breadcrumb__item" aria-current="page">Data</li>
  </ol>
</nav>

Customization

Twelve variables retune .breadcrumb without touching component CSS. Override on .breadcrumb itself, on a parent scope, or on :root. The cascade scopes the change.

Variable Default Use
--breadcrumb-padding-y 0 Vertical padding around the trail (wraps for chip-style)
--breadcrumb-padding-x 0 Horizontal padding around the trail
--breadcrumb-gap calc(0.5rem * var(--st-density)) Space between crumbs and between divider and text
--breadcrumb-margin-bottom 0 Trailing space below the trail
--breadcrumb-font-size inherit Crumb text size
--breadcrumb-bg transparent Background fill (set with padding + radius for chip wrap)
--breadcrumb-radius 0 Outer corner radius (opt-in for chip wrap)
--breadcrumb-color var(--st-muted-foreground) Trail color (also paints the divider via currentColor)
--breadcrumb-hover-color var(--st-foreground) Trail link hover color
--breadcrumb-active-color var(--st-foreground) Current page color (aria-current="page")
--breadcrumb-divider '›' (U+203A, in fallback) Glyph between crumbs. Override on the <nav> wrapper or any ancestor; any content value works (string, url(), counter)
--breadcrumb-icon-size 1rem Leading / trailing icon width and height