Use our Tailwind CSS breadcrumbs component to simply create beautiful breadcrumbs for your pages with Material Tailwind.
Breadcrumbs are website links that allow users to track where they are on a website and how far they are from the homepage. They are highly important elements for your search engine optimisation (SEO) and user experience.
See below our versatile breadcrumbs component example that you can use in your Tailwind CSS project.
<nav aria-label="breadcrumb" class="w-max">
<ol class="flex flex-wrap items-center w-full px-4 py-2 rounded-md bg-blue-gray-50 bg-opacity-60">
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="opacity-60">Docs</a><span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">/</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="opacity-60">Components</a><span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">/</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#">Breadcrumbs</a></li>
</ol>
</nav> You can add any type of icon for the breadcrumbs component as easy as using icon in html.
<nav aria-label="breadcrumb" class="w-max">
<ol class="flex flex-wrap items-center w-full px-4 py-2 rounded-md bg-blue-gray-50 bg-opacity-60">
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 20 20"
fill="currentColor">
<path
d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z">
</path>
</svg>
</a>
<span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
/
</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="opacity-60">
<span>
Components
</span>
</a>
<span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">/</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#">
Breadcrumbs
</a>
</li>
</ol>
</nav>A breadcrumbs could be a block level component as well that get's all the available space in a row. You can display a breadcrumbs as a block level element using the w-full class.
<nav aria-label="breadcrumb" class="block w-full">
<ol class="flex flex-wrap items-center w-full px-4 py-2 rounded-md bg-blue-gray-50 bg-opacity-60">
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="opacity-60">
Docs
</a>
<span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
/
</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="opacity-60">
Components
</a>
<span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
/
</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#">Breadcrumbs</a>
</li>
</ol>
</nav>You can modify the Breadcrumbs separators, here is an example:
<nav aria-label="breadcrumb" class="w-max">
<ol class="flex flex-wrap items-center w-full px-4 py-2 rounded-md bg-blue-gray-50 bg-opacity-60">
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="opacity-60">
Docs
</a>
<span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
-
</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="opacity-60">
Components
</a>
<span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
-
</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#">
Breadcrumbs
</a>
</li>
</ol>
</nav>You can customize the Breadcrumbs, here is an example:
<nav aria-label="breadcrumb" class="w-max">
<ol
class="flex flex-wrap items-center w-full p-1 border border-white rounded-full bg-blue-gray-50 bg-opacity-60 bg-gradient-to-tr from-gray-900 to-gray-800">
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="px-3 py-1 font-medium text-gray-900 bg-white rounded-full">
Docs
</a>
<span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"
aria-hidden="true" class="w-4 h-4 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path>
</svg></span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="px-3 py-1 font-medium text-gray-900 bg-white rounded-full">
Components
</a>
<span
class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
<svg
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"
aria-hidden="true" class="w-4 h-4 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path>
</svg>
</span>
</li>
<li
class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
<a href="#" class="px-3 py-1 font-medium text-gray-900 bg-white rounded-full">
Breadcrumbs
</a>
</li>
</ol>
</nav>