MijnUI

breadcrumb.html
<nav
  class="flex flex-col items-start sm:items-center justify-start gap-1 text-muted-text sm:flex-row"
  aria-label="breadcrumb"
>
  <div class="flex items-center gap-1">
    <span class="flex items-center text-sm">
      <a
        class="flex items-center text-muted-text hover:text-main-text hover:underline"
        href="/"
      >
        Home
      </a>
    </span>
 
    <span class="size-3.5">
      <svg
        stroke="currentColor"
        fill="none"
        stroke-width="2"
        viewBox="0 0 24 24"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-full w-full"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </span>
  </div>
 
  <div class="flex items-center gap-1">
    <span class="flex items-center text-sm">
      <a
        class="flex items-center text-muted-text hover:text-main-text hover:underline"
        href="/"
      >
        Blocks
      </a>
    </span>
 
    <span class="size-3.5">
      <svg
        stroke="currentColor"
        fill="none"
        stroke-width="2"
        viewBox="0 0 24 24"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-full w-full"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </span>
  </div>
 
  <div class="flex items-center gap-1">
    <span class="flex items-center text-sm">
      <a
        class="flex items-center text-muted-text hover:text-main-text hover:underline"
        href="/"
      >
        Components
      </a>
    </span>
 
    <span class="size-3.5">
      <svg
        stroke="currentColor"
        fill="none"
        stroke-width="2"
        viewBox="0 0 24 24"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-full w-full"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </span>
  </div>
 
  <div class="flex items-center gap-1">
    <span class="flex items-center text-sm">
      <a
        class="flex items-center text-muted-text hover:text-main-text hover:underline"
        href="/"
      >
        Documentation
      </a>
    </span>
 
    <span class="size-3.5">
      <svg
        stroke="currentColor"
        fill="none"
        stroke-width="2"
        viewBox="0 0 24 24"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="h-full w-full"
        height="1em"
        width="1em"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </span>
  </div>
</nav>
Breadcrumb
