logo Template.Vault

search

CTRL+K or '/'

Contact

Components

breadcrumbs - Template.Vault

Learn how to create elegant, responsive breadcrumbs using Tailwind CSS. Enhance navigation and user experience with easy-to-follow, customizable breadcrumb styles.

Breadcrumbs improve site navigation, guiding users through content levels and enhancing usability and SEO. Ideal for simplifying complex website structures.

Default breadcrumbs

Use this breadcrumb example to display the layered structure of pages within your website.

See on Github
HTML

<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
    <li class="inline-flex items-center [all:unset]">
      <a href="#" class="inline-flex items-center text-sm font-medium text-[#212121] hover:text-[#8e8e28] dark:text-[#bebebe] dark:hover:text-white">        
        Home
      </a>
    </li>
    <li class="[all:unset]">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"></path>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-[#212121] hover:text-[#8e8e28] md:ms-2 dark:text-[#bebebe] dark:hover:text-white">Components</a>
      </div>
    </li>
    <li aria-current="page" class="[all:unset]">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"></path>
        </svg>
        <span class="ms-1 text-sm font-medium text-[#212121] md:ms-2 dark:text-[#bebebe]">Breadcrumbs</span>
      </div>
    </li>
  </ol>
</nav>

Breadcrumbs with icon

Enhance navigation with breadcrumb trails using icons. Guide users seamlessly through pages with clear, stylish hierarchy indicators.

See on Github
HTML

<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
    <li class="inline-flex items-center">
      <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
        <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"></path>
        </svg>
        Home
      </a>
    </li>
    <li class="[all:unset]">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"></path>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white">Components</a>
      </div>
    </li>
    <li aria-current="page" class="[all:unset]">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"></path>
        </svg>
        <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">Breadcrumbs</span>
      </div>
    </li>
  </ol>
</nav>

Breadcrumbs with solid background

Create a clear path for users with breadcrumbs on a solid background. Simplify navigation and improve UX by highlighting each step in the journey.

See on Github
HTML

<nav class="flex px-5 py-2 border border-gray-200 rounded-lg bg-gray-50 dark:bg-[#212121a4] dark:border-gray-700" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse my-0 pl-0">
    <li class="inline-flex items-center [all:unset]">
      <a href="#" class="inline-flex items-center text-sm font-medium text-[#212121] hover:text-[#8e8e28] dark:text-[#bebebe] dark:hover:text-white">
        <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
          <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"></path>
        </svg>
        Home
      </a>
    </li>
    <li class="[all:unset]">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"></path>
        </svg>
        <a href="#" class="ms-1 text-sm font-medium text-[#212121] hover:text-[#8e8e28] md:ms-2 dark:text-[#bebebe] dark:hover:text-white">Components</a>
      </div>
    </li>
    <li aria-current="page" class="[all:unset]">
      <div class="flex items-center">
        <svg class="rtl:rotate-180 w-3 h-3 mx-1 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
          <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 9 4-4-4-4"></path>
        </svg>
        <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-[#bebebe]">Template.vault</span>
      </div>
    </li>
  </ol>
</nav>