Breadcrumb

Navigation aid showing hierarchy path, helping users understand their location within the app.

<!-- Breadcrumb -->
<nav></nav>
 
<!-- Breadcrumb List -->
<ol class="flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-text sm:gap-2.5"></ol>
 
<!-- Breadcrumb Item -->
<li class="inline-flex items-center gap-1.5"></li>
 
<!-- Breadcrumb Link -->
<a class="transition-colors hover:text-main-text hover:underline" href="#">Breadcrumb Link</a>
 
<!-- Breadcrumb Item/Separator -->
<li class="[&>svg]:h-3.5 [&>svg]:w-3.5"></li>
 
<!-- Breadcrumb Item/Active Page -->
<li class="inline-flex items-center gap-1.5"></li>
 
<!-- Breadcrumb Link/Active Link -->
<span class="font-normal text-main-text">Breadcrumb Link</span>

Previous

Badge

Next

Button

On this page