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.
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>breadcrumb with icons
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>breadcrumb with dropdown
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>breadcrumb with icon and dropdown
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>breadcrumb with badge
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>breadcrumb with solid background
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 styles
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>
Examples
Tailwind CSS Breadcrumbs Examples
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.
Breadcrumb with Ellipsis Examples
Breadcrumb with greater-than icon and Ellipsis.
<nav> <ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-base break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
<svg width="24" height="24"
class="w-5 h-5 transition-all duration-500 hover:text-neutral-900" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17.0001V11.1408C3 10.0929 3 9.56895 3.23665 9.12676C3.4733 8.68457 3.90927 8.39393 4.7812 7.81264L9.7812 4.47931C10.8567 3.76231 11.3944 3.40381 12 3.40381C12.6056 3.40381 13.1433 3.76231 14.2188 4.47931L17.4376 6.62517C19.1815 7.78775 20.0534 8.36904 20.5267 9.25341C21 10.1378 21 11.1857 21 13.2816V17.0001C21 18.8857 21 19.8285 20.4142 20.4143C19.8284 21.0001 18.8856 21.0001 17 21.0001H7C5.11438 21.0001 4.17157 21.0001 3.58579 20.4143C3 19.8285 3 18.8857 3 17.0001Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M15 17L9 17" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg></a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5"><button type="button"
class="flex items-center gap-1 transition-all duration-500 hover:text-neutral-900"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-ellipsis w-4 h-4" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg></button></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 transition-all duration-500 hover:text-neutral-900"><a
class="" href="/components">Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5"><span class="text-black font-normal">Breadcrumb</span>
</li>
</ol>
</nav>Breadcrumb with Dropdown Examples
Breadcrumbs will have dropdown menu to navigate sub pages of the site or application.
<nav>
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-base break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
<svg width="24" height="24" class="w-5 h-5 transition-all duration-500 hover:text-neutral-900"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17.0001V11.1408C3 10.0929 3 9.56895 3.23665 9.12676C3.4733 8.68457 3.90927 8.39393 4.7812 7.81264L9.7812 4.47931C10.8567 3.76231 11.3944 3.40381 12 3.40381C12.6056 3.40381 13.1433 3.76231 14.2188 4.47931L17.4376 6.62517C19.1815 7.78775 20.0534 8.36904 20.5267 9.25341C21 10.1378 21 11.1857 21 13.2816V17.0001C21 18.8857 21 19.8285 20.4142 20.4143C19.8284 21.0001 18.8856 21.0001 17 21.0001H7C5.11438 21.0001 4.17157 21.0001 3.58579 20.4143C3 19.8285 3 18.8857 3 17.0001Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M15 17L9 17" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg></a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center">
<div class="dropdown relative flex">
<button type="button" data-target="dropdown-with-icon"
class="dropdown-toggle cursor-pointer font-semibold text-center shadow-xs">
<svg class="w-4 h-4" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg>
</button>
<div id="dropdown-with-icon"
class="dropdown-menu rounded-xl shadow-lg bg-white absolute top-full w-auto mt-2"
aria-labelledby="dropdown-with-icon">
<ul class="py-2">
<li>
<a class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 text-gray-900 font-medium"
href="javascript:;">
Documentation </a>
</li>
<li>
<a class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 text-gray-900 font-medium"
href="javascript:;">
Themes </a>
</li>
<li>
<a class="flex items-center gap-3 px-3 py-2 hover:bg-gray-100 text-gray-900 font-medium"
href="javascript:;">
GitHub</a>
</li>
</ul>
</div>
</div>
</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 transition-all duration-500 hover:text-neutral-900"><a class=""
href="/components">Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5"><span class="text-black font-normal">Breadcrumb</span>
</li>
</ol>
</nav>Breadcrumb with icon and border Examples
These tailwind css breadcrumbs will not only have icons but also border.
<!-- Breadcrumb with Icons -->
<nav>
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
<svg width="24" height="24" class="w-5 h-5 transition-all duration-500 hover:text-neutral-900"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17.0001V11.1408C3 10.0929 3 9.56895 3.23665 9.12676C3.4733 8.68457 3.90927 8.39393 4.7812 7.81264L9.7812 4.47931C10.8567 3.76231 11.3944 3.40381 12 3.40381C12.6056 3.40381 13.1433 3.76231 14.2188 4.47931L17.4376 6.62517C19.1815 7.78775 20.0534 8.36904 20.5267 9.25341C21 10.1378 21 11.1857 21 13.2816V17.0001C21 18.8857 21 19.8285 20.4142 20.4143C19.8284 21.0001 18.8856 21.0001 17 21.0001H7C5.11438 21.0001 4.17157 21.0001 3.58579 20.4143C3 19.8285 3 18.8857 3 17.0001Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M15 17L9 17" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg></a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="transition-all duration-500 hover:text-neutral-900"><a class="flex items-center gap-1.5"
href="/components"> <svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg> Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 text-black font-normal"><svg width="24" height="24" class="w-5 h-5"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 21H14C16.8284 21 18.2426 21 19.1213 20.1213C20 19.2426 20 17.8284 20 15V9.0208C20 8.26895 20 7.89303 19.8694 7.54964C19.7389 7.20625 19.4891 6.92528 18.9896 6.36334L17.1934 4.34254C16.6058 3.68154 16.312 3.35104 15.9212 3.17552C15.5303 3 15.0881 3 14.2037 3H10C7.17157 3 5.75736 3 4.87868 3.87868C4 4.75736 4 6.17157 4 9V15C4 17.8284 4 19.2426 4.87868 20.1213C5.75736 21 7.17157 21 10 21Z"
stroke="#000000" stroke-width="null" class="my-path"></path>
<path
d="M14.5 3V6C14.5 6.46466 14.5 6.69698 14.5384 6.89018C14.6962 7.68356 15.3164 8.30376 16.1098 8.46157C16.303 8.5 16.5353 8.5 17 8.5H20"
stroke="#000000" stroke-width="null" class="my-path"></path>
<path d="M7 13H15" stroke="#000000" stroke-width="null" stroke-linecap="round" class="my-path">
</path>
<path d="M7 16H12" stroke="#000000" stroke-width="null" stroke-linecap="round" class="my-path">
</path>
</svg> Breadcrumb
</li>
</ol>
</nav>
<!-- Breadcrumb with Border -->
<nav class="w-fit rounded-lg border px-3 py-2">
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
<svg width="24" height="24" class="w-5 h-5 transition-all duration-500 hover:text-neutral-900"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17.0001V11.1408C3 10.0929 3 9.56895 3.23665 9.12676C3.4733 8.68457 3.90927 8.39393 4.7812 7.81264L9.7812 4.47931C10.8567 3.76231 11.3944 3.40381 12 3.40381C12.6056 3.40381 13.1433 3.76231 14.2188 4.47931L17.4376 6.62517C19.1815 7.78775 20.0534 8.36904 20.5267 9.25341C21 10.1378 21 11.1857 21 13.2816V17.0001C21 18.8857 21 19.8285 20.4142 20.4143C19.8284 21.0001 18.8856 21.0001 17 21.0001H7C5.11438 21.0001 4.17157 21.0001 3.58579 20.4143C3 19.8285 3 18.8857 3 17.0001Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M15 17L9 17" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg></a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="transition-all duration-500 hover:text-neutral-900"><a class="flex items-center gap-1.5"
href="">Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 text-black font-normal">Breadcrumb
</li>
</ol>
</nav>Breadcrumb with Dot and Slash Separator Examples
Breadcrumbs with Dot and Slash Separator stand out and attracts the attention of the user.
<!-- Breadcrumb with Icons -->
<nav>
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
<svg width="24" height="24" class="w-5 h-5 transition-all duration-500 hover:text-neutral-900"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17.0001V11.1408C3 10.0929 3 9.56895 3.23665 9.12676C3.4733 8.68457 3.90927 8.39393 4.7812 7.81264L9.7812 4.47931C10.8567 3.76231 11.3944 3.40381 12 3.40381C12.6056 3.40381 13.1433 3.76231 14.2188 4.47931L17.4376 6.62517C19.1815 7.78775 20.0534 8.36904 20.5267 9.25341C21 10.1378 21 11.1857 21 13.2816V17.0001C21 18.8857 21 19.8285 20.4142 20.4143C19.8284 21.0001 18.8856 21.0001 17 21.0001H7C5.11438 21.0001 4.17157 21.0001 3.58579 20.4143C3 19.8285 3 18.8857 3 17.0001Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M15 17L9 17" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg></a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="transition-all duration-500 hover:text-neutral-900"><a class="flex items-center gap-1.5"
href="/components"> <svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg> Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 text-black font-normal"><svg width="24" height="24" class="w-5 h-5"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 21H14C16.8284 21 18.2426 21 19.1213 20.1213C20 19.2426 20 17.8284 20 15V9.0208C20 8.26895 20 7.89303 19.8694 7.54964C19.7389 7.20625 19.4891 6.92528 18.9896 6.36334L17.1934 4.34254C16.6058 3.68154 16.312 3.35104 15.9212 3.17552C15.5303 3 15.0881 3 14.2037 3H10C7.17157 3 5.75736 3 4.87868 3.87868C4 4.75736 4 6.17157 4 9V15C4 17.8284 4 19.2426 4.87868 20.1213C5.75736 21 7.17157 21 10 21Z"
stroke="#000000" stroke-width="null" class="my-path"></path>
<path
d="M14.5 3V6C14.5 6.46466 14.5 6.69698 14.5384 6.89018C14.6962 7.68356 15.3164 8.30376 16.1098 8.46157C16.303 8.5 16.5353 8.5 17 8.5H20"
stroke="#000000" stroke-width="null" class="my-path"></path>
<path d="M7 13H15" stroke="#000000" stroke-width="null" stroke-linecap="round" class="my-path">
</path>
<path d="M7 16H12" stroke="#000000" stroke-width="null" stroke-linecap="round" class="my-path">
</path>
</svg> Breadcrumb
</li>
</ol>
</nav>
<!-- Breadcrumb with Border -->
<nav class="w-fit rounded-lg border px-3 py-2">
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
<svg width="24" height="24" class="w-5 h-5 transition-all duration-500 hover:text-neutral-900"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17.0001V11.1408C3 10.0929 3 9.56895 3.23665 9.12676C3.4733 8.68457 3.90927 8.39393 4.7812 7.81264L9.7812 4.47931C10.8567 3.76231 11.3944 3.40381 12 3.40381C12.6056 3.40381 13.1433 3.76231 14.2188 4.47931L17.4376 6.62517C19.1815 7.78775 20.0534 8.36904 20.5267 9.25341C21 10.1378 21 11.1857 21 13.2816V17.0001C21 18.8857 21 19.8285 20.4142 20.4143C19.8284 21.0001 18.8856 21.0001 17 21.0001H7C5.11438 21.0001 4.17157 21.0001 3.58579 20.4143C3 19.8285 3 18.8857 3 17.0001Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M15 17L9 17" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg></a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="transition-all duration-500 hover:text-neutral-900"><a class="flex items-center gap-1.5"
href="">Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 text-black font-normal">Breadcrumb
</li>
</ol>
</nav>Select Breadcrumb Examples
Breadcrumb with Select allows users to navigate between hierarchical pages while selecting specific options or categories within the path.
<!-- Breadcrumb with Select -->
<nav>
<ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
<svg width="24" height="24" class="w-5 h-5 transition-all duration-500 hover:text-neutral-900"
viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17.0001V11.1408C3 10.0929 3 9.56895 3.23665 9.12676C3.4733 8.68457 3.90927 8.39393 4.7812 7.81264L9.7812 4.47931C10.8567 3.76231 11.3944 3.40381 12 3.40381C12.6056 3.40381 13.1433 3.76231 14.2188 4.47931L17.4376 6.62517C19.1815 7.78775 20.0534 8.36904 20.5267 9.25341C21 10.1378 21 11.1857 21 13.2816V17.0001C21 18.8857 21 19.8285 20.4142 20.4143C19.8284 21.0001 18.8856 21.0001 17 21.0001H7C5.11438 21.0001 4.17157 21.0001 3.58579 20.4143C3 19.8285 3 18.8857 3 17.0001Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M15 17L9 17" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg></a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="transition-all duration-500 hover:text-neutral-900">
<div class="relative w-full">
<select id="countries"
class="border rounded-md block w-full py-1.5 px-3 pr-8 focus:outline-none appearance-none shadow-xs bg-white">
<option selected>Documentation</option>
<option value="Components">Components</option>
<option value="Themes">Themes</option>
</select>
<svg xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 absolute right-2 top-1/2 -translate-y-1/2 opacity-50 pointer-events-none"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" aria-hidden="true" viewBox="0 0 24 24">
<path d="m6 9 6 6 6-6"></path>
</svg>
</div>
</li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 text-black font-normal">Breadcrumb
</li>
</ol>
</nav>Standard Breadcrumb Examples
Standard breadcrumb displays the navigation path within an application, It supports variations like icons, ellipsis, and different separators for better readability
<!-- Breadcrumb with Ellipsis -->
<nav>
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
Home</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5"><button type="button"
class="flex items-center gap-1 transition-all duration-500 hover:text-neutral-900"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-ellipsis w-5 h-5" aria-hidden="true">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg></button></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 transition-all duration-500 hover:text-neutral-900"><a
class="" href="/components">Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5"><span class="text-black font-normal">Breadcrumb</span>
</li>
</ol>
</nav>
<!-- Breadcrumb with Icons -->
<nav>
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li><a class="flex items-center gap-1.5" href="/">
<svg width="24" height="24"
class="w-5 h-5 transition-all duration-500 hover:text-neutral-900" viewBox="0 0 24 24"
fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 17.0001V11.1408C3 10.0929 3 9.56895 3.23665 9.12676C3.4733 8.68457 3.90927 8.39393 4.7812 7.81264L9.7812 4.47931C10.8567 3.76231 11.3944 3.40381 12 3.40381C12.6056 3.40381 13.1433 3.76231 14.2188 4.47931L17.4376 6.62517C19.1815 7.78775 20.0534 8.36904 20.5267 9.25341C21 10.1378 21 11.1857 21 13.2816V17.0001C21 18.8857 21 19.8285 20.4142 20.4143C19.8284 21.0001 18.8856 21.0001 17 21.0001H7C5.11438 21.0001 4.17157 21.0001 3.58579 20.4143C3 19.8285 3 18.8857 3 17.0001Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
<path d="M15 17L9 17" stroke="currentColor" stroke-width="null" stroke-linecap="round"
class="my-path"></path>
</svg> Home</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="transition-all duration-500 hover:text-neutral-900"><a
class="flex items-center gap-1.5" href="/components"> <svg class="w-5 h-5" width="24"
height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15V10C21 8.11438 21 7.17157 20.4142 6.58579C19.8284 6 18.8856 6 17 6H14.8028C14.0882 6 13.7309 6 13.4105 5.888C13.2148 5.81961 13.0309 5.72121 12.8655 5.59633C12.5946 5.39184 12.3964 5.09456 12 4.5C11.6036 3.90544 11.4054 3.60816 11.1345 3.40367C10.9691 3.27879 10.7852 3.18039 10.5895 3.112C10.2691 3 9.91179 3 9.19722 3H8.89627C6.16864 3 4.80482 3 3.93706 3.82186C3.89763 3.85921 3.85921 3.89763 3.82186 3.93706C3 4.80482 3 6.16864 3 8.89627V15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21Z"
stroke="currentColor" stroke-width="null" class="my-path"></path>
</svg> Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 text-black font-normal"><svg width="24" height="24"
class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 21H14C16.8284 21 18.2426 21 19.1213 20.1213C20 19.2426 20 17.8284 20 15V9.0208C20 8.26895 20 7.89303 19.8694 7.54964C19.7389 7.20625 19.4891 6.92528 18.9896 6.36334L17.1934 4.34254C16.6058 3.68154 16.312 3.35104 15.9212 3.17552C15.5303 3 15.0881 3 14.2037 3H10C7.17157 3 5.75736 3 4.87868 3.87868C4 4.75736 4 6.17157 4 9V15C4 17.8284 4 19.2426 4.87868 20.1213C5.75736 21 7.17157 21 10 21Z"
stroke="#000000" stroke-width="null" class="my-path"></path>
<path
d="M14.5 3V6C14.5 6.46466 14.5 6.69698 14.5384 6.89018C14.6962 7.68356 15.3164 8.30376 16.1098 8.46157C16.303 8.5 16.5353 8.5 17 8.5H20"
stroke="#000000" stroke-width="null" class="my-path"></path>
<path d="M7 13H15" stroke="#000000" stroke-width="null" stroke-linecap="round"
class="my-path">
</path>
<path d="M7 16H12" stroke="#000000" stroke-width="null" stroke-linecap="round"
class="my-path">
</path>
</svg> Breadcrumb
</li>
</ol>
</nav>
<!-- Breadcrumb with Border -->
<nav class="w-fit rounded-lg border px-3 py-2">
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
Home</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="transition-all duration-500 hover:text-neutral-900"><a
class="flex items-center gap-1.5" href="/components">Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="lucide lucide-chevron-right size-3" aria-hidden="true">
<path d="m9 18 6-6-6-6"></path>
</svg></li>
<li class="flex items-center gap-1.5 text-black font-normal">Breadcrumb
</li>
</ol>
</nav>
<!-- Breadcrumb with Dot -->
<nav>
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
Home</a></li>
<li>•</li>
<li class="transition-all duration-500 hover:text-neutral-900"><a
class="flex items-center gap-1.5" href="/components">Components</a></li>
<li class="text-black">•</li>
<li class="flex items-center gap-1.5 text-black font-normal">Breadcrumb
</li>
</ol>
</nav>
<!-- Breadcrumb with Slash Separator -->
<nav>
<ol
class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5 text-neutral-500">
<li class="flex items-center gap-1.5"><a class="" href="/">
Home</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-slash"
aria-hidden="true">
<path d="M22 2 2 22"></path>
</svg></li>
<li class="transition-all duration-500 hover:text-neutral-900"><a
class="flex items-center gap-1.5" href="/components">Components</a></li>
<li><svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-slash"
aria-hidden="true">
<path d="M22 2 2 22"></path>
</svg></li>
<li class="flex items-center gap-1.5 text-black font-normal">Breadcrumb
</li>
</ol>
</nav>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More