# 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 space-x-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 space-x-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 space-x-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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts