Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators.

Example

              
<!-- Breadcrumb -->
<nav>
  <ul aria-label="breadcrumb" class="breadcrumb flex flex-wrap justify-start gap-1">
    <li>
      <a href="#" class="px-2 hover:text-primary-600 dark:hover:text-primary-200" aria-current="page">
        Home
      </a>
    </li>
  </ul>
</nav>

<!-- Breadcrumb -->
<nav>
  <ul aria-label="breadcrumb" class="breadcrumb flex flex-wrap justify-start gap-1">
    <li>
      <a href="#" class="px-2 hover:text-primary-600 dark:hover:text-primary-200">
        Home
      </a>
    </li>
    <li>
      <a href="#" class="px-2 hover:text-primary-600 dark:hover:text-primary-200" aria-current="page">
        Category
      </a>
    </li>
  </ul>
</nav>

<!-- Breadcrumb -->
<nav>
  <ul aria-label="breadcrumb" class="breadcrumb flex flex-wrap justify-start gap-1">
    <li>
      <a href="#" class="px-2 hover:text-primary-600 dark:hover:text-primary-200">
        Home
      </a>
    </li>
    <li>
      <a href="#" class="px-2 hover:text-primary-600 dark:hover:text-primary-200">
        Category
      </a>
    </li>
    <li>
      <a href="#" class="px-2 hover:text-primary-600 dark:hover:text-primary-200" aria-current="page">
        Business
      </a>
    </li>
  </ul>
</nav>