Components
Breadcrumbs are a navigation system used to show a user's location in a site or app.
The simple form of chevron breadcrumbs.
<ol class="flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">
<li class="text-sm">
<a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
Home
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</li>
<li class="text-sm">
<a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
App Center
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</li>
<li class="text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
Application
</li>
</ol>
The simple form of slashes breadcrumbs.
<ol class="flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">
<li class="text-sm text-gray-600 dark:text-gray-400">
<a class="flex items-center hover:text-blue-600" href="#">
Home
<svg class="flex-shrink-0 h-5 w-5 text-gray-400 dark:text-gray-600 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="text-sm text-gray-600 dark:text-gray-400">
<a class="flex items-center hover:text-blue-600" href="#">
App Center
<svg class="flex-shrink-0 h-5 w-5 text-gray-400 dark:text-gray-600 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="text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
Application
</li>
</ol>
Example with icons.
<ol class="flex items-center whitespace-nowrap min-w-0" aria-label="Breadcrumb">
<li class="text-sm">
<a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
<svg class="flex-shrink-0 mr-3 h-4 w-4 text-gray-600 dark:text-gray-600" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
<path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>
Home
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</li>
<li class="text-sm">
<a class="flex items-center text-gray-500 hover:text-blue-600" href="#">
<svg class="flex-shrink-0 mr-3 h-4 w-4 text-gray-600 dark:text-gray-600" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"/>
<path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
</svg>
App Center
<svg class="flex-shrink-0 mx-3 overflow-visible h-2.5 w-2.5 text-gray-400 dark:text-gray-600" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</li>
<li class="text-sm font-semibold text-gray-800 truncate dark:text-gray-200" aria-current="page">
Application
</li>
</ol>