Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
Breadcrumb Clean
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
Breadcrumb Distinct
<nav class="bg-gray-200 rounded-pill px-3 py-2" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav class="bg-gray-200 rounded-pill px-3 py-2" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a class="text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav class="bg-gray-200 rounded-pill px-3 py-2" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a class="text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav class="bg-gray-200 rounded-pill p-3" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a class="text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav class="bg-gray-200 rounded p-3" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a class="text-decoration-none" href="#">Home</a></li>
<li class="breadcrumb-item"><a class="text-decoration-none" href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>