Breadcrumb

Displays the path to the current resource using a hierarchy of links.

Examples

Default

Home Components Breadcrumb 
<c-breadcrumb>
  <c-breadcrumb-list>
    <c-breadcrumb-item>
      <c-breadcrumb-link href="/">Home</c-breadcrumb-link>
    </c-breadcrumb-item>
    <c-breadcrumb-separator></c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-link href="/components">Components</c-breadcrumb-link>
    </c-breadcrumb-item>
    <c-breadcrumb-separator></c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-page>Breadcrumb</c-breadcrumb-page>
    </c-breadcrumb-item>
  </c-breadcrumb-list>
</c-breadcrumb>

Custom Separator

Use a custom component in the slot of <c-breadcrumb-separator> to create a custom separator.

Home Components Breadcrumb 
<c-breadcrumb>
  <c-breadcrumb-list>
    <c-breadcrumb-item>
      <c-breadcrumb-link href="/">Home</c-breadcrumb-link>
    </c-breadcrumb-item>
    <c-breadcrumb-separator>
      <c-lucide-icon icon="slash" size="14"></c-lucide-icon>
    </c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-link href="/components">Components</c-breadcrumb-link>
    </c-breadcrumb-item>
    <c-breadcrumb-separator>
      <c-lucide-icon icon="slash" size="14"></c-lucide-icon>
    </c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-page>Breadcrumb</c-breadcrumb-page>
    </c-breadcrumb-item>
  </c-breadcrumb-list>
</c-breadcrumb>

You can compose <c-breadcrumb-item> with a <c-dropdown-menu> to create a dropdown in the breadcrumb.

Home Toggle menu
Documentation Themes GitHub
Components Breadcrumb 
<c-breadcrumb>
  <c-breadcrumb-list>
    <c-breadcrumb-item>
      <c-breadcrumb-link href="/">Home</c-breadcrumb-link>
    </c-breadcrumb-item>
    <c-breadcrumb-separator></c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-dropdown-menu>
        <span
          slot="trigger"
          class="flex items-center gap-1 cursor-pointer hover:text-foreground transition-colors"
        >
          <c-breadcrumb-ellipsis></c-breadcrumb-ellipsis>
          <span class="sr-only">Toggle menu</span>
        </span>
        <div slot="content">
          <c-dropdown-menu-item>Documentation</c-dropdown-menu-item>
          <c-dropdown-menu-item>Themes</c-dropdown-menu-item>
          <c-dropdown-menu-item>GitHub</c-dropdown-menu-item>
        </div>
      </c-dropdown-menu>
    </c-breadcrumb-item>
    <c-breadcrumb-separator></c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-link href="/components">Components</c-breadcrumb-link>
    </c-breadcrumb-item>
    <c-breadcrumb-separator></c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-page>Breadcrumb</c-breadcrumb-page>
    </c-breadcrumb-item>
  </c-breadcrumb-list>
</c-breadcrumb>

Collapsed

Use <c-breadcrumb-ellipsis> to show a collapsed state when the breadcrumb is too long.

Home Components Breadcrumb 
<c-breadcrumb>
  <c-breadcrumb-list>
    <c-breadcrumb-item>
      <c-breadcrumb-link href="/">Home</c-breadcrumb-link>
    </c-breadcrumb-item>
    <c-breadcrumb-separator></c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-ellipsis></c-breadcrumb-ellipsis>
    </c-breadcrumb-item>
    <c-breadcrumb-separator></c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-link href="/components">Components</c-breadcrumb-link>
    </c-breadcrumb-item>
    <c-breadcrumb-separator></c-breadcrumb-separator>
    <c-breadcrumb-item>
      <c-breadcrumb-page>Breadcrumb</c-breadcrumb-page>
    </c-breadcrumb-item>
  </c-breadcrumb-list>
</c-breadcrumb>

API Reference

The root container component that wraps the breadcrumb navigation.

Prop Type Default Description
breadcrumb-classes string - Additional CSS classes for the nav element

The ordered list container for breadcrumb items.

Prop Type Default Description
breadcrumb-list-classes string - Additional CSS classes for the list element

Individual list item that wraps breadcrumb content (links, pages, or other components).

Prop Type Default Description
breadcrumb-item-classes string - Additional CSS classes for the list item

A link element for navigating to a breadcrumb destination.

Prop Type Default Description
href string - The URL the link navigates to
breadcrumb-link-classes string - Additional CSS classes for the link

Represents the current page in the breadcrumb trail. Styled as non-interactive text.

Prop Type Default Description
breadcrumb-page-classes string - Additional CSS classes for the page text

A visual separator between breadcrumb items. Defaults to a chevron-right icon.

Prop Type Default Description
breadcrumb-separator-classes string - Additional CSS classes for the separator

Use the default slot to provide a custom separator icon or element.

Displays an ellipsis icon to indicate hidden breadcrumb items.

Prop Type Default Description
breadcrumb-ellipsis-classes string - Additional CSS classes for the ellipsis container

Accessibility

The breadcrumb component follows accessibility best practices:

  • Uses semantic <nav> element with aria-label="breadcrumb"
  • Implements proper list structure with <ol> and <li> elements
  • Current page is marked with aria-current="page"
  • Separators are hidden from screen readers with aria-hidden="true"
  • Ellipsis includes a screen reader-only "More" label