Breadcrumbs

<!--
  Day 125: Breadcrumbs

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Breadcrumbs -->
<div class="mx-auto flex w-full max-w-2xl flex-col gap-6">
  <!-- Slash Breadcrumbs -->
  <nav aria-label="Breadcrumb with slashes">
    <ol
      class="flex w-full items-center gap-1 overflow-x-auto rounded-2xl bg-white p-1.5 text-sm shadow-sm ring-1 ring-zinc-900/5 scrollbar-none"
    >
      <li>
        <a
          href="javascript:void(0)"
          aria-label="Home"
          class="flex size-7 items-center justify-center rounded-xl text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            aria-hidden="true"
            class="hi-micro hi-home inline-block size-4"
          >
            <path
              d="M8.543 2.232a.75.75 0 0 0-1.085 0l-5.25 5.5A.75.75 0 0 0 2.75 9H4v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-1a1 1 0 1 1 2 0v1a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9h1.25a.75.75 0 0 0 .543-1.268l-5.25-5.5Z"
            />
          </svg>
        </a>
      </li>
      <li class="text-zinc-300" aria-hidden="true">/</li>
      <li>
        <a
          href="javascript:void(0)"
          class="rounded-xl px-2.5 py-1 font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          Workspace
        </a>
      </li>
      <li class="text-zinc-300" aria-hidden="true">/</li>
      <li>
        <a
          href="javascript:void(0)"
          class="rounded-xl px-2.5 py-1 font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          Design
        </a>
      </li>
      <li class="text-zinc-300" aria-hidden="true">/</li>
      <li>
        <span
          aria-current="page"
          class="rounded-xl px-2.5 py-1 font-semibold whitespace-nowrap text-zinc-900"
        >
          Components
        </span>
      </li>
    </ol>
  </nav>
  <!-- END Slash Breadcrumbs -->

  <!-- Chevron Breadcrumbs -->
  <nav aria-label="Breadcrumb with chevrons">
    <ol
      class="flex w-full items-center gap-1 overflow-x-auto rounded-2xl bg-white p-1.5 text-sm shadow-sm ring-1 ring-zinc-900/5 scrollbar-none"
    >
      <li>
        <a
          href="javascript:void(0)"
          aria-label="Account"
          class="flex size-7 items-center justify-center rounded-xl text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            aria-hidden="true"
            class="hi-micro hi-user-circle inline-block size-4"
          >
            <path
              fill-rule="evenodd"
              d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      </li>
      <li class="flex items-center text-zinc-300" aria-hidden="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-chevron-right inline-block size-3.5"
        >
          <path
            fill-rule="evenodd"
            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          class="rounded-xl px-2.5 py-1 font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          Billing
        </a>
      </li>
      <li class="flex items-center text-zinc-300" aria-hidden="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-chevron-right inline-block size-3.5"
        >
          <path
            fill-rule="evenodd"
            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          class="rounded-xl px-2.5 py-1 font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          Subscriptions
        </a>
      </li>
      <li class="flex items-center text-zinc-300" aria-hidden="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="currentColor"
          class="hi-micro hi-chevron-right inline-block size-3.5"
        >
          <path
            fill-rule="evenodd"
            d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </li>
      <li>
        <span
          aria-current="page"
          class="rounded-xl px-2.5 py-1 font-semibold whitespace-nowrap text-zinc-900"
        >
          Invoice 2841
        </span>
      </li>
    </ol>
  </nav>
  <!-- END Chevron Breadcrumbs -->

  <!-- Dot Breadcrumbs -->
  <nav aria-label="Breadcrumb with dots">
    <ol
      class="flex w-full items-center gap-1 overflow-x-auto rounded-2xl bg-white p-1.5 text-sm shadow-sm ring-1 ring-zinc-900/5 scrollbar-none"
    >
      <li>
        <a
          href="javascript:void(0)"
          aria-label="Shop"
          class="flex size-7 items-center justify-center rounded-xl text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            aria-hidden="true"
            class="hi-micro hi-shopping-bag inline-block size-4"
          >
            <path
              fill-rule="evenodd"
              d="M5 4a3 3 0 0 1 6 0v1h2.5A1.5 1.5 0 0 1 15 6.5v6A2.5 2.5 0 0 1 12.5 15h-9A2.5 2.5 0 0 1 1 12.5v-6A1.5 1.5 0 0 1 2.5 5H5V4Zm4.5 1V4a1.5 1.5 0 1 0-3 0v1h3Zm-3 2.75a.75.75 0 0 0-1.5 0V8a3 3 0 1 0 6 0v-.25a.75.75 0 0 0-1.5 0V8a1.5 1.5 0 1 1-3 0v-.25Z"
              clip-rule="evenodd"
            />
          </svg>
        </a>
      </li>
      <li class="flex items-center" aria-hidden="true">
        <span class="size-1 rounded-full bg-zinc-300"></span>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          class="rounded-xl px-2.5 py-1 font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          Men
        </a>
      </li>
      <li class="flex items-center" aria-hidden="true">
        <span class="size-1 rounded-full bg-zinc-300"></span>
      </li>
      <li>
        <a
          href="javascript:void(0)"
          class="rounded-xl px-2.5 py-1 font-medium text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
        >
          Shoes
        </a>
      </li>
      <li class="flex items-center" aria-hidden="true">
        <span class="size-1 rounded-full bg-zinc-300"></span>
      </li>
      <li>
        <span
          aria-current="page"
          class="rounded-xl px-2.5 py-1 font-semibold whitespace-nowrap text-zinc-900"
        >
          Running
        </span>
      </li>
    </ol>
  </nav>
  <!-- END Dot Breadcrumbs -->
</div>
<!-- END Breadcrumbs -->