On this page

Breadcrumb

---
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@/components/starwind/breadcrumb";
---

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbEllipsis />
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products/categories">Categories</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Electronics</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Installation

pnpx starwind@latest add breadcrumb

npx starwind@latest add breadcrumb

yarn dlx starwind@latest add breadcrumb

Usage

Separator

The BreadcrumbSeparator component is used to visually separate items in the breadcrumb trail. By default, it displays a chevron-right icon, but you can provide your own custom separator.

---
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/starwind/breadcrumb";
---

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>/</BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Interactive Ellipsis

Use the BreadcrumbEllipsis component with a dropdown menu to create interactive breadcrumbs that reveal hidden paths. This is especially useful for deep navigation hierarchies.

---
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@/components/starwind/breadcrumb";
import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@/components/starwind/dropdown";
---

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <Dropdown>
        <DropdownTrigger asChild>
          <BreadcrumbEllipsis class="hover:text-foreground transition-colors" />
        </DropdownTrigger>
        <DropdownContent>
          <DropdownItem as="a" href="/products">Products</DropdownItem>
          <DropdownItem as="a" href="/products/categories">Categories</DropdownItem>
          <DropdownItem as="a" href="/products/categories/electronics">Electronics</DropdownItem>
        </DropdownContent>
      </Dropdown>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/products/categories/electronics/laptops">Laptops</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>MacBook Pro</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

The root navigation component that contains all breadcrumb elements.

The component renders a <nav> element with the aria-label="breadcrumb" attribute for accessibility.

<Breadcrumb>
  {/* BreadcrumbList component goes here */}
</Breadcrumb>

BreadcrumbList

A container component that renders an ordered list for breadcrumb items.

The component renders an <ol> element with styling for the breadcrumb list.

<BreadcrumbList>
  {/* BreadcrumbItem components go here */}
</BreadcrumbList>

BreadcrumbItem

A component that represents each item in the breadcrumb navigation.

The component renders an <li> element that contains links or the current page indicator.

<BreadcrumbItem>
  {/* BreadcrumbLink or BreadcrumbPage component goes here */}
</BreadcrumbItem>

BreadcrumbLink

A component for clickable breadcrumb links that navigate to previous levels in the hierarchy.

The component renders an <a> element with styling for breadcrumb links. It also supports the asChild prop for cases where you want to use your own link component.

<BreadcrumbLink href="/path">Link Text</BreadcrumbLink>

BreadcrumbPage

A component that represents the current page in the breadcrumb trail (the last item).

The component renders a <span> element with the appropriate ARIA attributes: role="link", aria-disabled="true", and aria-current="page".

<BreadcrumbPage>Current Page</BreadcrumbPage>

BreadcrumbSeparator

A component for visual separation between breadcrumb items.

The component renders an <li> element with role="presentation" and aria-hidden="true" attributes. By default, it displays a chevron-right icon, but you can provide your own custom separator.

<BreadcrumbSeparator />
<!-- Or with custom separator -->
<BreadcrumbSeparator>
  <CustomIcon />
</BreadcrumbSeparator>

BreadcrumbEllipsis

A component used to indicate truncated breadcrumb items, typically used when there are many levels in the breadcrumb trail.

The component renders a <span> element with role="presentation" and aria-hidden="true" attributes, displaying a dots icon and including a screen reader-only “More” text for improved accessibility.

<BreadcrumbEllipsis />

Changelog

v1.0.0

Initial component release with starwind v1.5.0