Breadcrumb

Navigation aid showing the current page's location within a hierarchy.

Default

Simple breadcrumb with chevron separators.

html 
<nav aria-label="Breadcrumb">
  <ol class="uc-flex uc-items-center uc-gap-1.5">
    <li><a href="#" class="uc-text-sm uc-text-fg-disabled">Home</a></li>
    <li><svg class="uc-w-4 uc-h-4">...</svg></li>
    <li><span class="uc-text-sm uc-font-medium">Current</span></li>
  </ol>
</nav>

With Slash Separator

Uses a forward slash as the separator between items.

html 
<nav aria-label="Breadcrumb">
  <ol class="uc-flex uc-items-center uc-gap-1.5">
    <li><a href="#" class="uc-text-sm uc-text-fg-disabled">Home</a></li>
    <li><span class="uc-text-fg-disabled/60 uc-mx-1.5 uc-text-sm">/</span></li>
    <li><a href="#" class="uc-text-sm uc-text-fg-disabled">Products</a></li>
    <li><span class="uc-text-fg-disabled/60 uc-mx-1.5 uc-text-sm">/</span></li>
    <li><span class="uc-text-sm uc-font-medium">T-Shirts</span></li>
  </ol>
</nav>

With Icons

Breadcrumb items accompanied by descriptive icons.

html 
<nav aria-label="Breadcrumb">
  <ol class="uc-flex uc-items-center uc-gap-1.5">
    <li>
      <a href="#" class="uc-inline-flex uc-items-center uc-gap-1.5 uc-text-sm uc-text-fg-disabled">
        <svg class="uc-w-4 uc-h-4">...</svg>
        Home
      </a>
    </li>
    <li><svg class="uc-w-4 uc-h-4">...</svg></li>
    <li><span class="uc-text-sm uc-font-medium">Current</span></li>
  </ol>
</nav>

Truncated

Long breadcrumb paths are collapsed with an ellipsis to save space.

html 
<nav aria-label="Breadcrumb">
  <ol class="uc-flex uc-items-center uc-gap-1.5">
    <li><a href="#" class="uc-text-sm uc-text-fg-disabled">Home</a></li>
    <li><svg class="uc-w-4 uc-h-4">...</svg></li>
    <li><button class="uc-w-8 uc-h-8 uc-rounded-lg"><svg class="uc-w-4 uc-h-4"><!-- ... --></svg></button></li>
    <li><svg class="uc-w-4 uc-h-4">...</svg></li>
    <li><span class="uc-text-sm uc-font-medium">Current</span></li>
  </ol>
</nav>

With Dropdown

A breadcrumb item with a dropdown indicator for selecting alternative paths.

html 
<nav aria-label="Breadcrumb">
  <ol class="uc-flex uc-items-center uc-gap-1.5">
    <li><a href="#" class="uc-text-sm uc-text-fg-disabled">Home</a></li>
    <li><svg class="uc-w-4 uc-h-4">...</svg></li>
    <li class="uc-relative">
      <button class="uc-inline-flex uc-items-center uc-gap-1 uc-text-sm uc-text-fg-disabled">
        Products
        <svg class="uc-w-3.5 uc-h-3.5">...</svg>
      </button>
      <div class="uc-absolute uc-top-full uc-left-0 uc-mt-1.5 uc-w-44 uc-rounded-lg uc-border uc-bg-neutrals-surface uc-shadow-lg uc-py-1">
        <a href="#" class="uc-block uc-px-3 uc-py-1.5 uc-text-sm">Electronics</a>
      </div>
    </li>
    <li><svg class="uc-w-4 uc-h-4">...</svg></li>
    <li><span class="uc-text-sm uc-font-medium">T-Shirts</span></li>
  </ol>
</nav>

API Reference

All utility classes available for the Breadcrumb component.

Class Type Description
uc-flex uc-items-center uc-gap-1.5 Base Horizontal layout for the breadcrumb list
uc-inline-flex uc-items-center Base Inline alignment for each breadcrumb item
uc-text-sm Base Default text size for breadcrumb links and labels
uc-text-fg-disabled Base Muted color for non-current breadcrumb links
uc-text-fg-primary State Primary color for the current (last) breadcrumb item
uc-font-medium State Medium font weight for the current page label
uc-text-fg-disabled/60 Base Faded separator color for chevrons or slashes
uc-hover:text-fg-primary Modifier Hover state for breadcrumb links
uc-transition-colors Modifier Smooth color transition on hover
uc-hidden State Hides dropdown menu by default

Accessibility

Keyboard and screen reader support.

Feature Details
Navigation Wrap in nav element with aria-label="Breadcrumb"
Current page Last item should have aria-current="page"
Separators Visual separators should be aria-hidden="true"
Keyboard All links are focusable and activatable via Enter