Components

Tailwind CSS Breadcrumbs

Breadcrumb components are also known as breadcrumbs trail which are navigational guide to help users know where they are on the web page. In other words a navigation system to show user’s location on website or application.

image

with reference to tailwind css; breadcrumbs can be broadly divided into three types - attribute based, location based and path based. Ideally it is used to help users navigate the hierarchical based website without putting much of the efforts and help user determine precisely where they are on the website. Breadcrumbs are clickable text which can be seen like this. Home -> category -> sub category -> item.

Default breadcrumb

Following tailwind breadcrumb example which shows the hierarchial structure of the pages.

 <nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
  <a href="javascript:;" class="inline-flex items-center text-base font-medium text-gray-900 hover:text-indigo-800"> Tab text </a>
</li>
<li>
  <div class="flex items-center">
    <svg class="mx-1 w-1 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
    </svg>
    <a href="javascript:;" class="ml-1 text-base font-medium text-gray-900 hover:text-indigo-800 md:ml-2"> Tab text</a>
  </div>
</li>
<li aria-current="page">
  <div class="flex items-center">
    <svg class="mx-1 w-1 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
    </svg>
    <span class="ml-1 text-base font-medium text-indigo-600 md:ml-2 ">Tab text</span>
  </div>
</li>
</ol>
</nav>

Chevrons breadcrumb

Since it is shown in chevron shaped it is known as chevrons breadcrumbs.

 <nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
 <a href="javascript:;" class="inline-flex items-center text-base font-medium text-gray-900 hover:text-indigo-800"> Tab text </a>
</li>
<li>
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.5 15L11.0858 11.4142C11.7525 10.7475 12.0858 10.4142 12.0858 10C12.0858 9.58579 11.7525 9.25245 11.0858 8.58579L7.5 5" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
   </svg>
   <a href="javascript:;" class="ml-1 text-base font-medium text-gray-900 hover:text-indigo-800 md:ml-2"> Tab text</a>
 </div>
</li>
<li aria-current="page">
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7.5 15L11.0858 11.4142C11.7525 10.7475 12.0858 10.4142 12.0858 10C12.0858 9.58579 11.7525 9.25245 11.0858 8.58579L7.5 5" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
   </svg>
   <span class="ml-1 text-base font-medium text-indigo-600 md:ml-2 ">Tab text</span>
 </div>
</li>
</ol>
</nav>

These breadcrumbs will help you navigate site with icons in them.

 <nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
 <svg class="w-5 h-5 mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g clip-path="url(#clip0_11192_719)">
     <path d="M1.66663 4.99999C1.66663 3.15904 3.15901 1.66666 4.99996 1.66666C6.84091 1.66666 8.33329 3.15904 8.33329 4.99999C8.33329 6.84094 6.84091 8.33332 4.99996 8.33332C3.15901 8.33332 1.66663 6.84094 1.66663 4.99999Z" stroke="#111827" stroke-width="1.6" />
     <path d="M1.66663 15C1.66663 13.4286 1.66663 12.643 2.15478 12.1548C2.64294 11.6667 3.42861 11.6667 4.99996 11.6667C6.57131 11.6667 7.35698 11.6667 7.84514 12.1548C8.33329 12.643 8.33329 13.4286 8.33329 15C8.33329 16.5713 8.33329 17.357 7.84514 17.8452C7.35698 18.3333 6.57131 18.3333 4.99996 18.3333C3.42861 18.3333 2.64294 18.3333 2.15478 17.8452C1.66663 17.357 1.66663 16.5713 1.66663 15Z" stroke="#111827" stroke-width="1.6" />
     <path d="M11.6666 4.99999C11.6666 3.42864 11.6666 2.64297 12.1548 2.15481C12.6429 1.66666 13.4286 1.66666 15 1.66666C16.5713 1.66666 17.357 1.66666 17.8451 2.15481C18.3333 2.64297 18.3333 3.42864 18.3333 4.99999C18.3333 6.57134 18.3333 7.35701 17.8451 7.84517C17.357 8.33332 16.5713 8.33332 15 8.33332C13.4286 8.33332 12.6429 8.33332 12.1548 7.84517C11.6666 7.35701 11.6666 6.57134 11.6666 4.99999Z" stroke="#111827" stroke-width="1.6" />
     <path d="M11.6666 15C11.6666 13.159 13.159 11.6667 15 11.6667C16.8409 11.6667 18.3333 13.159 18.3333 15C18.3333 16.8409 16.8409 18.3333 15 18.3333C13.159 18.3333 11.6666 16.8409 11.6666 15Z" stroke="#111827" stroke-width="1.6" />
   </g>
   <defs>
     <clipPath id="clip0_11192_719">
       <rect width="20" height="20" fill="white" />
     </clipPath>
   </defs>
 </svg>
 <a href="javascript:;" class="inline-flex items-center text-base font-medium text-gray-900 hover:text-indigo-800 whitespace-nowrap"> Tab text </a>
</li>
<li>
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
   </svg>
   <a href="javascript:;" class="ml-1 text-base font-medium text-gray-900 hover:text-indigo-800 md:ml-2 whitespace-nowrap"> Tab text</a>
 </div>
</li>
<li aria-current="page">
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
   </svg>
   <span class="ml-1 text-base font-medium text-indigo-600 md:ml-2 whitespace-nowrap ">Tab text</span>
 </div>
</li>
</ol>
</nav>

Breadcrumbs will have dropdown menu to navigate sub pages of the site or application.

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More 
 <nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
 <div class="dropdown relative inline-flex">
   <button id="dropdown-default" type="button" class="dropdown-toggle inline-flex justify-center items-center gap-3 text-base font-medium text-gray-900 hover:text-indigo-800 bg-transparenta whitespace-nowrap"> Tab text <svg class="w-3 h-2 stroke-gray-900" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M1 1.5L4.58578 5.08578C5.25245 5.75245 5.58579 6.08579 6 6.08579C6.41421 6.08579 6.74755 5.75245 7.41421 5.08579L11 1.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
   </button>
   <div class="dropdown-menu transition-[opacity,margin] duration-[0.1ms] dropdown-open:opacity-100 opacity-0 w-72 hidden z-10 mt-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 " aria-labelledby="pd-dropdown-default">
     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#"> Newsletter </a>
     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#"> Purchases </a>
   </div>
 </div>
</li>
<li>
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
   </svg>
   <a href="javascript:;" class="ml-1 text-base font-medium text-gray-900 hover:text-indigo-800 md:ml-2 whitespace-nowrap"> Tab text</a>
 </div>
</li>
<li aria-current="page">
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
   </svg>
   <span class="ml-1 text-base font-medium text-indigo-600 md:ml-2 whitespace-nowrap ">Tab text</span>
 </div>
</li>
</ol>
</nav>

Along with icons here users get dropdown menu too.

 <nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
 <div class="dropdown relative inline-flex">
   <button id="dropdown-default" type="button" class="dropdown-toggle inline-flex justify-center items-center gap-3 text-base font-medium text-gray-900 hover:text-indigo-800 bg-transparenta whitespace-nowrap">
     <svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_11192_719)">
         <path d="M1.66663 4.99999C1.66663 3.15904 3.15901 1.66666 4.99996 1.66666C6.84091 1.66666 8.33329 3.15904 8.33329 4.99999C8.33329 6.84094 6.84091 8.33332 4.99996 8.33332C3.15901 8.33332 1.66663 6.84094 1.66663 4.99999Z" stroke="#111827" stroke-width="1.6"></path>
         <path d="M1.66663 15C1.66663 13.4286 1.66663 12.643 2.15478 12.1548C2.64294 11.6667 3.42861 11.6667 4.99996 11.6667C6.57131 11.6667 7.35698 11.6667 7.84514 12.1548C8.33329 12.643 8.33329 13.4286 8.33329 15C8.33329 16.5713 8.33329 17.357 7.84514 17.8452C7.35698 18.3333 6.57131 18.3333 4.99996 18.3333C3.42861 18.3333 2.64294 18.3333 2.15478 17.8452C1.66663 17.357 1.66663 16.5713 1.66663 15Z" stroke="#111827" stroke-width="1.6"></path>
         <path d="M11.6666 4.99999C11.6666 3.42864 11.6666 2.64297 12.1548 2.15481C12.6429 1.66666 13.4286 1.66666 15 1.66666C16.5713 1.66666 17.357 1.66666 17.8451 2.15481C18.3333 2.64297 18.3333 3.42864 18.3333 4.99999C18.3333 6.57134 18.3333 7.35701 17.8451 7.84517C17.357 8.33332 16.5713 8.33332 15 8.33332C13.4286 8.33332 12.6429 8.33332 12.1548 7.84517C11.6666 7.35701 11.6666 6.57134 11.6666 4.99999Z" stroke="#111827" stroke-width="1.6"></path>
         <path d="M11.6666 15C11.6666 13.159 13.159 11.6667 15 11.6667C16.8409 11.6667 18.3333 13.159 18.3333 15C18.3333 16.8409 16.8409 18.3333 15 18.3333C13.159 18.3333 11.6666 16.8409 11.6666 15Z" stroke="#111827" stroke-width="1.6"></path>
       </g>
       <defs>
         <clipPath id="clip0_11192_719">
           <rect width="20" height="20" fill="white"></rect>
         </clipPath>
       </defs>
     </svg> Tab text <svg class="w-3 h-2 stroke-gray-900" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M1 1.5L4.58578 5.08578C5.25245 5.75245 5.58579 6.08579 6 6.08579C6.41421 6.08579 6.74755 5.75245 7.41421 5.08579L11 1.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
   </button>
   <div class="dropdown-menu transition-[opacity,margin] duration-[0.1ms] dropdown-open:opacity-100 opacity-0 w-72 hidden z-10 mt-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 " aria-labelledby="pd-dropdown-default">
     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#"> Newsletter </a>
     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#"> Purchases </a>
   </div>
 </div>
</li>
<li>
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
   </svg>
   <a href="javascript:;" class="ml-1 text-base font-medium text-gray-900 hover:text-indigo-800 md:ml-2 whitespace-nowrap"> Tab text</a>
 </div>
</li>
<li aria-current="page">
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
   </svg>
   <span class="ml-1 text-base font-medium text-indigo-600 md:ml-2 whitespace-nowrap ">Tab text</span>
 </div>
</li>
</ol>
</nav>

These tailwind css breadcrumbs will not only have icons but also badges. 

 <nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
 <div class="dropdown relative inline-flex">
   <button id="dropdown-default" type="button" class="dropdown-toggle inline-flex justify-center items-center gap-3 text-base font-medium text-gray-900 hover:text-indigo-800 bg-transparenta whitespace-nowrap">
     <svg class="w-5 h-5" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_11192_719)">
         <path d="M1.66663 4.99999C1.66663 3.15904 3.15901 1.66666 4.99996 1.66666C6.84091 1.66666 8.33329 3.15904 8.33329 4.99999C8.33329 6.84094 6.84091 8.33332 4.99996 8.33332C3.15901 8.33332 1.66663 6.84094 1.66663 4.99999Z" stroke="#111827" stroke-width="1.6"></path>
         <path d="M1.66663 15C1.66663 13.4286 1.66663 12.643 2.15478 12.1548C2.64294 11.6667 3.42861 11.6667 4.99996 11.6667C6.57131 11.6667 7.35698 11.6667 7.84514 12.1548C8.33329 12.643 8.33329 13.4286 8.33329 15C8.33329 16.5713 8.33329 17.357 7.84514 17.8452C7.35698 18.3333 6.57131 18.3333 4.99996 18.3333C3.42861 18.3333 2.64294 18.3333 2.15478 17.8452C1.66663 17.357 1.66663 16.5713 1.66663 15Z" stroke="#111827" stroke-width="1.6"></path>
         <path d="M11.6666 4.99999C11.6666 3.42864 11.6666 2.64297 12.1548 2.15481C12.6429 1.66666 13.4286 1.66666 15 1.66666C16.5713 1.66666 17.357 1.66666 17.8451 2.15481C18.3333 2.64297 18.3333 3.42864 18.3333 4.99999C18.3333 6.57134 18.3333 7.35701 17.8451 7.84517C17.357 8.33332 16.5713 8.33332 15 8.33332C13.4286 8.33332 12.6429 8.33332 12.1548 7.84517C11.6666 7.35701 11.6666 6.57134 11.6666 4.99999Z" stroke="#111827" stroke-width="1.6"></path>
         <path d="M11.6666 15C11.6666 13.159 13.159 11.6667 15 11.6667C16.8409 11.6667 18.3333 13.159 18.3333 15C18.3333 16.8409 16.8409 18.3333 15 18.3333C13.159 18.3333 11.6666 16.8409 11.6666 15Z" stroke="#111827" stroke-width="1.6"></path>
       </g>
       <defs>
         <clipPath id="clip0_11192_719">
           <rect width="20" height="20" fill="white"></rect>
         </clipPath>
       </defs>
     </svg> Tab text <svg class="w-3 h-2 stroke-gray-900" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M1 1.5L4.58578 5.08578C5.25245 5.75245 5.58579 6.08579 6 6.08579C6.41421 6.08579 6.74755 5.75245 7.41421 5.08579L11 1.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
     </svg>
   </button>
   <div class="dropdown-menu transition-[opacity,margin] duration-[0.1ms] dropdown-open:opacity-100 opacity-0 w-72 hidden z-10 mt-2 min-w-[15rem] bg-white shadow-md rounded-lg p-2 " aria-labelledby="pd-dropdown-default">
     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#"> Newsletter </a>
     <a class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 " href="#"> Purchases </a>
   </div>
 </div>
</li>
<li>
 <div class="flex items-center ">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
   </svg>
   <a href="javascript:;" class="ml-1 text-base font-medium text-gray-900 hover:text-indigo-800 md:ml-2 whitespace-nowrap"> Tab text <span class="py-1 px-2 bg-indigo-50 text-indigo-600 text-xs rounded-full ml-3">New</span>
   </a>
 </div>
</li>
<li aria-current="page">
 <div class="flex items-center">
   <svg class="mx-1 w-5 h-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round" />
   </svg>
   <span class="ml-1 text-base font-medium text-indigo-600 md:ml-2 whitespace-nowrap">Tab text</span>
 </div>
</li>
</ol>
</nav>

Breadcrumbs with solid background stand out and attracts the attention of the user for easy navigation.

 <div class="w-full relative">
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center ">
 <li class="inline-flex items-center">
   <a href="javascript:;" class="inline-flex items-center text-base font-medium text-gray-900 hover:text-indigo-800 hover:bg-gray-100 py-2 px-5 rounded-full whitespace-nowrap"> Tab text </a>
 </li>
 <li>
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-2" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <a href="javascript:;" class="text-base font-medium text-gray-900 hover:text-indigo-800 hover:bg-gray-100 py-2 px-5 rounded-full whitespace-nowrap "> Tab text</a>
   </div>
 </li>
 <li aria-current="page">
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-2" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <span class="text-base font-medium text-indigo-600 bg-indigo-50  py-2 px-5 rounded-full whitespace-nowrap ">Tab text</span>
   </div>
 </li>
</ol>
</nav>
<nav class="flex mt-4" aria-label="Breadcrumb">
<ol class="inline-flex items-center ">
 <li class="inline-flex items-center">
   <a href="javascript:;" class="inline-flex items-center text-base font-medium text-gray-900 hover:text-indigo-800 hover:bg-gray-100 py-2 px-5 rounded-full whitespace-nowrap"> Tab text </a>
 </li>
 <li>
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-2" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <a href="javascript:;" class="text-base font-medium text-gray-900 hover:text-indigo-800 hover:bg-gray-100 py-2 px-5 rounded-full whitespace-nowrap "> Tab text</a>
   </div>
 </li>
 <li aria-current="page">
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-2" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <span class="text-base font-medium text-indigo-600 bg-indigo-50  py-2 pl-5 pr-2 rounded-full flex items-center whitespace-nowrap">Tab text <span class="py-1 px-2 bg-white text-indigo-600 text-xs rounded-full ml-3">New</span>
     </span>
   </div>
 </li>
</ol>
</nav>
</div>

Breadcrumb tailwind css with different styles.

 <div class="w-full relative">
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center ">
 <li class="inline-flex items-center">
   <a href="javascript:;" class="inline-flex items-center text-base font-medium  text-indigo-600 bg-indigo-50 py-2 px-5 rounded-full whitespace-nowrap">
     <svg class="w-5 h-5 text-indigo-600 mr-2" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_11192_719)">
         <path d="M1.66663 4.99999C1.66663 3.15904 3.15901 1.66666 4.99996 1.66666C6.84091 1.66666 8.33329 3.15904 8.33329 4.99999C8.33329 6.84094 6.84091 8.33332 4.99996 8.33332C3.15901 8.33332 1.66663 6.84094 1.66663 4.99999Z" stroke="currentColor" stroke-width="1.6"></path>
         <path d="M1.66663 15C1.66663 13.4286 1.66663 12.643 2.15478 12.1548C2.64294 11.6667 3.42861 11.6667 4.99996 11.6667C6.57131 11.6667 7.35698 11.6667 7.84514 12.1548C8.33329 12.643 8.33329 13.4286 8.33329 15C8.33329 16.5713 8.33329 17.357 7.84514 17.8452C7.35698 18.3333 6.57131 18.3333 4.99996 18.3333C3.42861 18.3333 2.64294 18.3333 2.15478 17.8452C1.66663 17.357 1.66663 16.5713 1.66663 15Z" stroke="currentColor" stroke-width="1.6"></path>
         <path d="M11.6666 4.99999C11.6666 3.42864 11.6666 2.64297 12.1548 2.15481C12.6429 1.66666 13.4286 1.66666 15 1.66666C16.5713 1.66666 17.357 1.66666 17.8451 2.15481C18.3333 2.64297 18.3333 3.42864 18.3333 4.99999C18.3333 6.57134 18.3333 7.35701 17.8451 7.84517C17.357 8.33332 16.5713 8.33332 15 8.33332C13.4286 8.33332 12.6429 8.33332 12.1548 7.84517C11.6666 7.35701 11.6666 6.57134 11.6666 4.99999Z" stroke="currentColor" stroke-width="1.6"></path>
         <path d="M11.6666 15C11.6666 13.159 13.159 11.6667 15 11.6667C16.8409 11.6667 18.3333 13.159 18.3333 15C18.3333 16.8409 16.8409 18.3333 15 18.3333C13.159 18.3333 11.6666 16.8409 11.6666 15Z" stroke="currentColor" stroke-width="1.6"></path>
       </g>
       <defs>
         <clipPath id="clip0_11192_719">
           <rect width="20" height="20" fill="white"></rect>
         </clipPath>
       </defs>
     </svg> Tab text </a>
 </li>
 <li>
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-2" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <a href="javascript:;" class="group text-base font-medium text-gray-900 hover:text-indigo-800 hover:bg-gray-100 py-2 px-5 rounded-full whitespace-nowrap"> Tab text <span class="py-1 px-2 bg-indigo-50 text-indigo-600 text-xs rounded-full ml-3 group-hover:bg-white">New</span>
     </a>
   </div>
 </li>
 <li aria-current="page">
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-2" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <a href="javascript:;" class="text-base font-medium text-gray-900 py-2 px-5 rounded-full hover:bg-gray-100 hover:text-indigo-800 whitespace-nowrap">Tab text</a>
   </div>
 </li>
</ol>
</nav>
<nav class="flex mt-5" aria-label="Breadcrumb">
<ol class="inline-flex items-center ">
 <li class="inline-flex items-center">
   <a href="javascript:;" class="group inline-flex items-center text-base font-medium text-gray-900  hover:text-indigo-800 whitespace-nowrap">
     <svg class="w-5 h-5 mr-2 text-gray-900 group-hover:text-indigo-800" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g clip-path="url(#clip0_11192_719)">
         <path d="M1.66663 4.99999C1.66663 3.15904 3.15901 1.66666 4.99996 1.66666C6.84091 1.66666 8.33329 3.15904 8.33329 4.99999C8.33329 6.84094 6.84091 8.33332 4.99996 8.33332C3.15901 8.33332 1.66663 6.84094 1.66663 4.99999Z" stroke="currentColor" stroke-width="1.6"></path>
         <path d="M1.66663 15C1.66663 13.4286 1.66663 12.643 2.15478 12.1548C2.64294 11.6667 3.42861 11.6667 4.99996 11.6667C6.57131 11.6667 7.35698 11.6667 7.84514 12.1548C8.33329 12.643 8.33329 13.4286 8.33329 15C8.33329 16.5713 8.33329 17.357 7.84514 17.8452C7.35698 18.3333 6.57131 18.3333 4.99996 18.3333C3.42861 18.3333 2.64294 18.3333 2.15478 17.8452C1.66663 17.357 1.66663 16.5713 1.66663 15Z" stroke="currentColor" stroke-width="1.6"></path>
         <path d="M11.6666 4.99999C11.6666 3.42864 11.6666 2.64297 12.1548 2.15481C12.6429 1.66666 13.4286 1.66666 15 1.66666C16.5713 1.66666 17.357 1.66666 17.8451 2.15481C18.3333 2.64297 18.3333 3.42864 18.3333 4.99999C18.3333 6.57134 18.3333 7.35701 17.8451 7.84517C17.357 8.33332 16.5713 8.33332 15 8.33332C13.4286 8.33332 12.6429 8.33332 12.1548 7.84517C11.6666 7.35701 11.6666 6.57134 11.6666 4.99999Z" stroke="currentColor" stroke-width="1.6"></path>
         <path d="M11.6666 15C11.6666 13.159 13.159 11.6667 15 11.6667C16.8409 11.6667 18.3333 13.159 18.3333 15C18.3333 16.8409 16.8409 18.3333 15 18.3333C13.159 18.3333 11.6666 16.8409 11.6666 15Z" stroke="currentColor" stroke-width="1.6"></path>
       </g>
       <defs>
         <clipPath id="clip0_11192_719">
           <rect width="20" height="20" fill="white"></rect>
         </clipPath>
       </defs>
     </svg>Tab text </a>
 </li>
 <li>
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <span class="text-base font-medium text-gray-400 whitespace-nowrap "> Tab text</span>
   </div>
 </li>
 <li>
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <span href="#" class="text-base font-medium text-gray-400 whitespace-nowrap "> Tab text</span>
   </div>
 </li>
 <li aria-current="page">
   <div class="flex items-center">
     <svg class=" w-1 h-5 mx-5" viewBox="0 0 5 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M4.12561 1.13672L0.999943 18.8633" stroke="#E5E7EB" stroke-width="1.6" stroke-linecap="round"></path>
     </svg>
     <span class="text-base font-medium text-gray-400  pr-2 rounded-full flex items-center whitespace-nowrap">Tab text <span class="py-1 px-2 bg-indigo-50  text-indigo-600 text-xs rounded-full ml-3">New</span>
     </span>
   </div>
 </li>
</ol>
</nav>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More