Breadcrumb

Breadcrumb trail with separator variants.

Default breadcrumb

Use an <ol> with na-breadcrumb. Each <li> is separated by a / generated via CSS. The last item is automatically styled as the current page.

<ol class="na-breadcrumb">
  <li><a href="/">Home</a></li>
  <li><a href="/products">Products</a></li>
  <li><span>Widgets</span></li>
</ol>

Separator variants

Add a modifier class to swap the CSS-generated separator character.

<!-- default: / -->
<ol class="na-breadcrumb">...</ol>

<!-- arrow: › -->
<ol class="na-breadcrumb na-breadcrumb-arrow">...</ol>

<!-- dot: · -->
<ol class="na-breadcrumb na-breadcrumb-dot">...</ol>

<!-- gt: > -->
<ol class="na-breadcrumb na-breadcrumb-gt">...</ol>

With icons

<ol class="na-breadcrumb">
  <li>
    <a href="/" style="display:flex;align-items:center;gap:.3rem">
      <svg ...></svg> Home
    </a>
  </li>
  <li><a href="/settings">Settings</a></li>
  <li><span>Profile</span></li>
</ol>

Class reference

Class	Description
`na-breadcrumb`	Breadcrumb wrapper - use on `<ol>`
`na-breadcrumb-arrow`	Separator: ›
`na-breadcrumb-dot`	Separator: ›
`na-breadcrumb-gt`	Separator: >