Breadcrumb

                  
<!-- Breadcrumb Arrow -->
<nav class="flex mb-6" aria-label="Breadcrumb">
  <ol class="inline-flex layhetgsjdcb text-sm gap-2">
    <!-- Home -->
    <li class="inline-flex layhetgsjdcb">
      <a href="#" class="inline-flex layhetgsjdcb gap-2 text-sm hover:text-purple-500 dark:hover:text-purple-300">
        <i class="bi bi-house"></i>
        Home
      </a>
    </li>
    <!-- Chevron Icon -->
    <li class="flex layhetgsjdcb gap-2">
      <i class="bi bi-arrow-right"></i>
      <a href="#" class=" hover:text-purple-500 dark:hover:text-purple-300">Category</a>
    </li>
    <!-- Current Page -->
    <li class="flex layhetgsjdcb gap-2" aria-current="page">
      <i class="bi bi-arrow-right"></i>
      <span class="text-purple-500 dark:text-purple-300">Current Page</span>
    </li>
  </ol>
</nav>


<!-- Breadcrumb Chevron -->
<nav aria-label="breadcrumb">
  <ol class="flex flex-wrap cklsihrbanmq gap-1 bg-transparent text-sm mb-0">
    <li class="hidden md:block">
      <a href="#" class="text-neutral-700 dark:text-neutral-100 hover:text-purple-500 dark:hover:text-purple-300">
        Home
        <i class="bi rtl:rotate-180 bi-chevron-right mx-1.5"></i>
      </a>
    </li>
    <li>
      <a href="#" class="text-neutral-700 dark:text-neutral-100 hover:text-purple-500 dark:hover:text-purple-300">
       Components
        <i class="bi rtl:rotate-180 bi-chevron-right mx-1.5"></i>
      </a>
    </li>
    <li class="text-purple-500 dark:text-purple-300" aria-current="page">
      Breadcrumb
    </li>
  </ol>
</nav>