Breadcrumb Components: Taco Component Library

Breadcrumbs - entity seperators

<!-- with ">" symbol  -->
<ul class="flex gap-3 dark:text-zinc-50 items-center text-zinc-900">
    <li>
        <a class="inline-flex items-center gap-2">
            <span ><svg xmlns="http://www.w3.org/2000/svg" class="w-5 aspect-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <polyline points="9 22 9 12 15 12 15 22" /> </svg> </span>
            <span class="hover:underline">Home</span>
        </a>
    </li>
    <li> <a href="#"><span class="px-2">&gt;</span><span class="hover:underline">Components</span></a> </li>
    <li> <a href="#"><span class="px-2">&gt;</span><span class="hover:underline">Navbar</span></a> </li>
</ul>

<!-- with "/" symbol  -->
<ul class="flex gap-1 dark:text-zinc-50 text-zinc-900">
    <li>
        <a class="inline-flex items-center gap-2">
            <span ><svg xmlns="http://www.w3.org/2000/svg" class="w-5 aspect-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <polyline points="9 22 9 12 15 12 15 22" /> </svg> </span>
            <span class="hover:underline">Home</span>
        </a>
    </li>
    <li> <a href="#"><span class="px-4">&#8725;</span><span class="hover:underline">Components</span></a> </li>
    <li> <a href="#"><span class="px-4">&#8725;</span><span class="hover:underline">Navbar</span></a> </li>
</ul>

Breadcrumbs - icon seperators

<ul class="flex gap-3 dark:text-zinc-50 items-center text-zinc-900">
    <li>
      <a class="inline-flex items-center gap-2">
        <span ><svg xmlns="http://www.w3.org/2000/svg" class="w-5 aspect-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <polyline points="9 22 9 12 15 12 15 22" /> </svg> </span>
        <span class="hover:underline">Home</span>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center">
        <span class="px-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="9 6 15 12 9 18" /></svg></span>
        <span class="hover:underline">Components</span>
      </a>
    </li>
    <li>
      <a href="#" class="flex items-center">
        <span class="px-2"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 aspect-square" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="9 6 15 12 9 18" /></svg></span>
        <span class="hover:underline">Navbar</span>
      </a>
    </li>
</ul>

<!-- with "/" symbol  -->
<ul class="flex gap-3 dark:text-zinc-50 text-zinc-900">
    <li>
      <a class="inline-flex items-center gap-2">
        <span><svg xmlns="http://www.w3.org/2000/svg" class="w-5 aspect-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <polyline points="9 22 9 12 15 12 15 22" /> </svg> </span>
        <span class="hover:underline">Home</span>
      </a>
    </li>
    <li><a href="#"><span class="px-4">/</span><span class="hover:underline">Components</span></a> </li>
    <li> <a href="#"><span class="px-4">/</span><span class="hover:underline">Navbar</span></a> </li>
</ul>

Breadcrumbs with icons

<!-- with ">" symbol  -->
<ul class="flex gap-3 dark:text-zinc-50 items-center text-zinc-900">
  <li>
    <a class="inline-flex items-center gap-2">
      <span ><svg xmlns="http://www.w3.org/2000/svg" class="w-5 aspect-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <polyline points="9 22 9 12 15 12 15 22" /> </svg> </span>
      <span class="hover:underline">Home</span>
    </a>
  </li>
  <li>
    <a href="#" class="inline-flex items-center gap-1.5">
      <span class="px-2 font-semibold">&gt;</span>
      <span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 aspect-square" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M20 7.5v9l-4 2.25l-4 2.25l-4 -2.25l-4 -2.25v-9l4 -2.25l4 -2.25l4 2.25z" /> <path d="M12 12l4 -2.25l4 -2.25" /> <line x1="12" y1="12" x2="12" y2="21" /> <path d="M12 12l-4 -2.25l-4 -2.25" /> <path d="M20 12l-4 2v4.75" /> <path d="M4 12l4 2l0 4.75" /> <path d="M8 5.25l4 2.25l4 -2.25" /> </svg></span>
      <span class="hover:underline">Components</span>
    </a>
  </li>
  <li>
    <a href="#" class="inline-flex items-center gap-1.5">
      <span class="px-2 font-semibold">&gt;</span>
      <span><svg xmlns="http://www.w3.org/2000/svg" class="w-6 aspect-square" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <rect x="4" y="4" width="16" height="16" rx="2" /> <line x1="4" y1="9" x2="20" y2="9" /></svg></span >
      <span class="hover:underline">Navbar</span>
    </a>
  </li>
</ul>

<!-- with "/" symbol  -->
<ul class="flex gap-3 dark:text-zinc-50 items-center text-zinc-900">
  <li>
    <a class="inline-flex items-center gap-2">
      <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 aspect-square" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /> <polyline points="9 22 9 12 15 12 15 22" /> </svg> </span>
      <span class="hover:underline">Home</span>
    </a>
  </li>
  <li>
    <a href="#" class="inline-flex items-center gap-1.5">
      <span class="px-3 font-semibold">&#8725;</span>
      <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 aspect-square" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M20 7.5v9l-4 2.25l-4 2.25l-4 -2.25l-4 -2.25v-9l4 -2.25l4 -2.25l4 2.25z" /> <path d="M12 12l4 -2.25l4 -2.25" /> <line x1="12" y1="12" x2="12" y2="21" /> <path d="M12 12l-4 -2.25l-4 -2.25" /> <path d="M20 12l-4 2v4.75" /> <path d="M4 12l4 2l0 4.75" /> <path d="M8 5.25l4 2.25l4 -2.25" /> </svg> </span> 
      <span class="hover:underline">Components</span>
    </a>
  </li>
  <li>
    <a href="#" class="inline-flex items-center gap-1.5">
      <span class="px-3 font-semibold">&#8725;</span>
      <span> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 aspect-square" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <rect x="4" y="4" width="16" height="16" rx="2" /> <line x1="4" y1="9" x2="20" y2="9" /></svg></span>
      <span class="hover:underline">Navbar</span>
    </a>
  </li>
</ul>