v1.0.0

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="vt-breadcrumb">
    <li><a href="#" class="vt-breadcrumb-link">Home</a></li>
    <li><svg class="vt-w-4 vt-h-4 vt-breadcrumb-separator">...</svg></li>
    <li><span class="vt-breadcrumb-current">Current</span></li>
  </ol>
</nav>

With Slash Separator

Uses a forward slash as the separator between items.

html 
<nav aria-label="Breadcrumb">
  <ol class="vt-breadcrumb">
    <li><a href="#" class="vt-breadcrumb-link">Home</a></li>
    <li><span class="vt-breadcrumb-separator vt-text-sm">/</span></li>
    <li><a href="#" class="vt-breadcrumb-link">Products</a></li>
    <li><span class="vt-breadcrumb-separator vt-text-sm">/</span></li>
    <li><span class="vt-breadcrumb-current">T-Shirts</span></li>
  </ol>
</nav>

With Icons

Breadcrumb items accompanied by descriptive icons.

html 
<nav aria-label="Breadcrumb">
  <ol class="vt-breadcrumb">
    <li>
      <a href="#" class="vt-breadcrumb-link vt-inline-flex vt-items-center vt-gap-1.5">
        <svg class="vt-w-4 vt-h-4">...</svg>
        Home
      </a>
    </li>
    <li><svg class="vt-w-4 vt-h-4 vt-breadcrumb-separator">...</svg></li>
    <li><span class="vt-breadcrumb-current">Current</span></li>
  </ol>
</nav>

Truncated

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

html 
<nav aria-label="Breadcrumb">
  <ol class="vt-breadcrumb">
    <li><a href="#" class="vt-breadcrumb-link">Home</a></li>
    <li><svg class="vt-w-4 vt-h-4 vt-breadcrumb-separator">...</svg></li>
    <li><button class="vt-w-8 vt-h-8 vt-rounded-lg"><svg class="vt-w-4 vt-h-4"><!-- ... --></svg></button></li>
    <li><svg class="vt-w-4 vt-h-4 vt-breadcrumb-separator">...</svg></li>
    <li><span class="vt-breadcrumb-current">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="vt-breadcrumb">
    <li><a href="#" class="vt-breadcrumb-link">Home</a></li>
    <li><svg class="vt-w-4 vt-h-4 vt-breadcrumb-separator">...</svg></li>
    <li class="vt-relative">
      <button class="vt-breadcrumb-link vt-inline-flex vt-items-center vt-gap-1">
        Products
        <svg class="vt-w-3.5 vt-h-3.5">...</svg>
      </button>
      <div class="vt-absolute vt-top-full vt-left-0 vt-mt-1.5 vt-w-44 vt-rounded-lg vt-border vt-bg-surfaces-surface vt-shadow-lg vt-py-1">
        <a href="#" class="vt-block vt-px-3 vt-py-1.5 vt-text-sm">Electronics</a>
      </div>
    </li>
    <li><svg class="vt-w-4 vt-h-4 vt-breadcrumb-separator">...</svg></li>
    <li><span class="vt-breadcrumb-current">T-Shirts</span></li>
  </ol>
</nav>

API Reference

All utility classes available for the Breadcrumb component.

Class Type Description
vt-breadcrumb Base Horizontal layout for the breadcrumb list (flex, items-center, gap)
vt-breadcrumb-link Base Muted link with hover highlight and transition
vt-breadcrumb-separator Base Faded separator color with horizontal margin
vt-breadcrumb-current State Current page label — primary color, medium weight
vt-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
Built with:
Link Separator