Breadcrumb
Breadcrumbs are a navigation system used to show a user's location in a site or app.
Example
Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.
<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-500 hover:text-indigo-600 focus:outline-none focus:text-indigo-600 " href="#">Home</a>
<svg class="flex-shrink-0 h-5 w-5 text-gray-400 mx-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round" />
</svg>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-500 hover:text-indigo-600 focus:outline-none focus:text-indigo-600" href="#">
Library
<svg class="flex-shrink-0 h-5 w-5 text-gray-400 mx-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round" />
</svg>
</a>
</li>
<li class="inline-flex items-center font-semibold text-gray-800 truncate" aria-current="page">Data</li>
</ol>Divider
The simple form of chevron breadcrumbs.
<ol class="flex items-center whitespace-nowrap" aria-label="Breadcrumb">
<li class="inline-flex items-center">
<a class="flex items-center text-gray-500 hover:text-indigo-600 focus:outline-none focus:text-indigo-600" href="#">Home</a>
<svg
class="flex-shrink-0 mx-2 overflow-visible h-4 w-4 text-gray-400"
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"
>
<path d="m9 18 6-6-6-6" />
</svg>
</li>
<li class="inline-flex items-center">
<a class="flex items-center text-gray-500 hover:text-indigo-600 focus:outline-none focus:text-indigo-600" href="#">
Library
<svg
class="flex-shrink-0 mx-2 overflow-visible h-4 w-4 text-gray-400"
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"
>
<path d="m9 18 6-6-6-6" />
</svg>
</a>
</li>
<li class="inline-flex items-center font-semibold text-gray-800 truncate" aria-current="page">Data</li>
</ol>