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.

Prop	Type	Default
`class`	`string`	-

<Breadcrumb>
  <BreadcrumbList>
    <!-- Breadcrumb items -->
  </BreadcrumbList>
</Breadcrumb>

BreadcrumbList

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

Prop	Type	Default
`class`	`string`	-

<BreadcrumbList>
  <!-- BreadcrumbItem components -->
</BreadcrumbList>

BreadcrumbItem

A component that represents each item in the breadcrumb navigation.

Prop	Type	Default
`class`	`string`	-

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

BreadcrumbLink

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

Prop	Type	Default
`href`	`string`	Required
`asChild`	`boolean`	`false`
`class`	`string`	-

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

Additional Notes:

asChild: When enabled, renders the child element instead of an anchor tag

BreadcrumbPage

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

Prop	Type	Default
`class`	`string`	-

<BreadcrumbPage>Current Page</BreadcrumbPage>

BreadcrumbSeparator

A component for visual separation between breadcrumb items.

Prop	Type	Default
`class`	`string`	-

<BreadcrumbSeparator />

BreadcrumbEllipsis

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

Prop	Type	Default
`class`	`string`	-

<BreadcrumbEllipsis />

Changelog

v1.1.1

Add named slot “icon” to BreadcrumbEllipsis to enable easy icon swapping, and a default slot for the sr-only label

v1.1.0

Add a data-slot attribute to all components to enable global styling updates

v1.0.0

Initial component release with starwind v1.5.0