Breadcrumbs

Breadcrumb trails with slash, chevron, and background styles.

Default (with slashes)

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-separator">
      <span>/</span>
      <a href="#" class="breadcrumb-item">Components</a>
    </li>
    <li class="breadcrumb-separator">
      <span>/</span>
      <span class="breadcrumb-current">Breadcrumbs</span>
    </li>
  </ol>
</nav>

With chevrons

<li class="breadcrumb-separator">
  <svg class="h-4 w-4">...</svg>
  <a href="#" class="breadcrumb-item">Components</a>
</li>

With background — .breadcrumb .breadcrumb-bg

<ol class="breadcrumb breadcrumb-bg">...</ol>