Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators.
Example
Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb.
<nav aria-label="breadcrumb" class="mb-4">
<ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
<li>
<a href="#" class="text-gray-700 hover:text-blue-700">
Home
</a>
</li>
</ol>
</nav>
<nav aria-label="breadcrumb" class="mb-4">
<ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
<li>
<a href="#" class="text-gray-700 hover:text-blue-700">
Home
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-700 hover:text-blue-700">
Category
</a>
</li>
</ol>
</nav>
<nav aria-label="breadcrumb" class="mb-4">
<ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
<li>
<a href="#" class="text-gray-700 hover:text-blue-700">
Home
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-700 hover:text-blue-700">
Category
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
</a>
</li>
<li class="hidden md:block text-blue-700" aria-current="page">Business</li>
</ol>
</nav>
Dark Breadcrumb
<nav aria-label="breadcrumb" class="mb-4">
<ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
<li>
<a href="#" class="text-gray-200 hover:text-white">
Home
</a>
</li>
</ol>
</nav>
<nav aria-label="breadcrumb" class="mb-4">
<ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
<li>
<a href="#" class="text-gray-200 hover:text-white">
Home
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-200 hover:text-white">
Category
</a>
</li>
</ol>
</nav>
<nav aria-label="breadcrumb" class="mb-4">
<ol class="flex flex-wrap justify-start bg-transparent text-sm mb-0 space-x-1">
<li>
<a href="#" class="text-gray-200 hover:text-white">
Home
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
</a>
</li>
<li>
<a href="#" class="text-gray-200 hover:text-white">
Category
<svg xmlns="http://www.w3.org/2000/svg" class="mx-1 inline-block transform ltr:rotate-0 rtl:rotate-180" width="1rem" height="1rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="184 112 328 256 184 400" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"></polyline></svg>
</a>
</li>
<li class="hidden md:block text-white" aria-current="page">Business</li>
</ol>
</nav>
Edit breadcrumb from left to center replace justify-start with justify-center