Home
EliteAI Tools
Simple Breadcrumbs

Simple Breadcrumbs

simple yet modern breadcrumbs UI

This tailwind example is contributed by EliteAI Tools, on 06-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Breadcrumb

Author EliteAI Tools

Fork Fullscreen

<li class="flex items-center">
      <svg class="w-4 h-4 mx-2 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
      </svg>
      <a href="https://eliteai.tools/category" class="font-medium text-gray-700">
        Categories
      </a>
    </li>

<li class="flex items-center">
      <svg class="w-4 h-4 mx-2 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
      </svg>
      <a href="https://eliteai.tools/category/design" class="font-medium text-gray-700">
        Design
      </a>
    </li>

<li class="flex items-center" aria-current="page">
      <svg class="w-4 h-4 mx-2 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
        stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
        <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
      </svg>
      <span class="font-medium text-gray-600">
        AI Web Designer
      </span>
    </li>
  </ul>
</nav>

Related Examples