Breadcrumb

Navigation trail with separators indicating the current page location.

<nav class="nano-breadcrumb" aria-label="Breadcrumb">
  <ol class="nano-breadcrumb__list">
    <li class="nano-breadcrumb__item">
      <a class="nano-breadcrumb__link" href="#">Home</a>
      <span class="nano-breadcrumb__separator">/</span>
    </li>
    <li class="nano-breadcrumb__item">
      <a class="nano-breadcrumb__link" href="#">Components</a>
      <span class="nano-breadcrumb__separator">/</span>
    </li>
    <li class="nano-breadcrumb__item">
      <a class="nano-breadcrumb__link nano-breadcrumb__link--current" href="#" aria-current="page">Breadcrumb</a>
    </li>
  </ol>
</nav>

<!-- CSS-only component, no Stimulus controller required -->
<!-- The current page can be marked with --current modifier or aria-current="page" -->

Basic Breadcrumb