Breadcrumb
Breadcrumbs are a navigational UI component that helps users keep track of their location within a website or web app.
More Items
PreviewCode
<nav aria-label="breadcrumb">
<ul class="flex flex-wrap space-x-3 text-sm font-medium">
<li class="flex items-center space-x-3">
<a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
</li>
<li class="flex items-center space-x-3" aria-current="page">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-400">Social</a>
</li>
</ul>
</nav>
<nav aria-label="breadcrumb">
<ul class="flex flex-wrap space-x-3 text-sm font-medium">
<li class="flex items-center space-x-3">
<a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
</li>
<li class="flex items-center space-x-3">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
</li>
<li class="flex items-center space-x-3" aria-current="page">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-400">Export</a>
</li>
</ul>
</nav>
<nav aria-label="breadcrumb">
<ul class="flex flex-wrap space-x-3 text-sm font-medium">
<li class="flex items-center space-x-3">
<a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
</li>
<li class="flex items-center space-x-3">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
</li>
<li class="flex items-center space-x-3">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-800 hover:text-slate-600">Export</a>
</li>
<li class="flex items-center space-x-3" aria-current="page">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-400">Social</a>
</li>
</ul>
</nav>
<nav aria-label="breadcrumb">
<ul class="flex flex-wrap space-x-3 text-sm font-medium">
<li class="flex items-center space-x-3">
<a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
</li>
<li class="flex items-center space-x-3">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-800 hover:text-slate-600">···</a>
</li>
<li class="flex items-center space-x-3">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
</li>
<li class="flex items-center space-x-3">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-800 hover:text-slate-600">Export</a>
</li>
<li class="flex items-center space-x-3" aria-current="page">
<div aria-hidden="true" class="h-4 w-px rotate-12 rounded-full bg-slate-300">
</div>
<a href="#" class="text-slate-400">Social</a>
</li>
</ul>
</nav>Caret
PreviewCode
<nav aria-label="breadcrumb">
<ul class="flex flex-wrap space-x-3 text-sm font-medium">
<li class="flex items-center space-x-3">
<a href="#" class="text-slate-800 hover:text-slate-600">Dashboard</a>
</li>
<li class="flex items-center space-x-3">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 shrink-0 text-slate-500">
<path d="m9 18 6-6-6-6">
</path>
</svg>
<a href="#" class="text-slate-800 hover:text-slate-600">Reports</a>
</li>
<li class="flex items-center space-x-3" aria-current="page">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 shrink-0 text-slate-500">
<path d="m9 18 6-6-6-6">
</path>
</svg>
<a href="#" class="text-slate-400">Export</a>
</li>
</ul>
</nav>