v1.1.1

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 class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link">Home</a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link">Products</a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <span class="vt-breadcrumb-current">T-Shirts</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 class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link">Home</a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <span class="vt-breadcrumb-separator vt-text-sm">/</span>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link">Products</a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <span class="vt-breadcrumb-separator vt-text-sm">/</span>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <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 class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link vt-inline-flex vt-items-center vt-gap-1.5">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-house vt-w-4 vt-h-4">
          <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
        </svg>
        Home
      </a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link vt-inline-flex vt-items-center vt-gap-1.5">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-folder vt-w-4 vt-h-4">
          <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path>
        </svg>
        Category
      </a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <span class="vt-breadcrumb-current vt-inline-flex vt-items-center vt-gap-1.5">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-text vt-w-4 vt-h-4">
          <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path>
        </svg>
        Current Page
      </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 class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link">Home</a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <button class="vt-btn vt-btn-ghost vt-btn-icon vt-w-8 vt-h-8 vt-text-foreground-muted" aria-label="Show more breadcrumbs">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-ellipsis vt-w-4 vt-h-4">
          <circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle>
        </svg>
      </button>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link">Category</a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link">Subcategory</a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <span class="vt-breadcrumb-current">Current Page</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 class="vt-inline-flex vt-items-center">
      <a href="#" class="vt-breadcrumb-link">Home</a>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center vt-relative" id="breadcrumb-dropdown">
      <button class="vt-breadcrumb-link vt-inline-flex vt-items-center vt-gap-1" id="breadcrumb-dropdown-trigger">
        Products
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-down vt-w-3.5 vt-h-3.5">
          <path d="m6 9 6 6 6-6"></path>
        </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-border-border-default vt-bg-surface-card vt-shadow-lg vt-py-1 vt-hidden" id="breadcrumb-dropdown-menu">
        <a href="#" class="vt-block vt-px-3 vt-py-1.5 vt-text-sm vt-text-foreground-primary vt-hover:bg-surface-subtle vt-transition-colors">Electronics</a>
        <a href="#" class="vt-block vt-px-3 vt-py-1.5 vt-text-sm vt-text-foreground-primary vt-hover:bg-surface-subtle vt-transition-colors">Clothing</a>
        <a href="#" class="vt-block vt-px-3 vt-py-1.5 vt-text-sm vt-font-medium vt-text-foreground-primary vt-bg-surface-subtle">Products</a>
        <a href="#" class="vt-block vt-px-3 vt-py-1.5 vt-text-sm vt-text-foreground-primary vt-hover:bg-surface-subtle vt-transition-colors">Accessories</a>
      </div>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-breadcrumb-separator">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </li>
    <li class="vt-inline-flex vt-items-center">
      <span class="vt-breadcrumb-current">T-Shirts</span>
    </li>
  </ol>
</nav>

Guidelines

Where the user IS in a hierarchy. Progress through a flow → stepper.

Do
Mark the current page with breadcrumb-current, not a link.
Don't
Don't use a breadcrumb to show flow progress — use a stepper.
Do
Collapse deep paths with an ellipsis to keep the trail compact.

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