# Breadcrumb

<FrameworkCodeSwitcher>
  <div slot="astro">
```astro
---
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>
```
  </div>
  <div slot="react">
```tsx
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis } from "@/components/starwind/breadcrumb";

export function Example() {
  return (
    <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>
  );
}
```
  </div>
</FrameworkCodeSwitcher>

## Installation

```bash
npx 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.

```astro
---
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 a native disclosure around `BreadcrumbEllipsis` to reveal navigable hidden path segments. The
summary is keyboard-focusable, while every revealed segment remains a normal link.

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <details class="group relative">
        <summary
          class="hover:text-foreground focus-visible:ring-outline/50 cursor-pointer list-none rounded-sm outline-none focus-visible:ring-3 [&::-webkit-details-marker]:hidden"
          aria-label="Show hidden breadcrumb paths"
        >
          <BreadcrumbEllipsis />
        </summary>
        <ul
          class="bg-popover text-popover-foreground absolute top-full left-0 z-50 mt-1 min-w-40 rounded-md border p-1 shadow-md"
        >
          <li>
            <BreadcrumbLink class="hover:bg-muted block rounded-sm px-2 py-1.5" href="/docs/">
              Docs
            </BreadcrumbLink>
          </li>
          <li>
            <BreadcrumbLink
              class="hover:bg-muted block rounded-sm px-2 py-1.5"
              href="/docs/components/"
            >
              Components
            </BreadcrumbLink>
          </li>
          <li>
            <BreadcrumbLink
              class="hover:bg-muted block rounded-sm px-2 py-1.5"
              href="/docs/components/breadcrumb/"
            >
              Breadcrumb
            </BreadcrumbLink>
          </li>
        </ul>
      </details>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#usage">Usage</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Interactive Ellipsis</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>
```

> **Info:** The legacy polymorphic dropdown-item composition was replaced with a native disclosure. Its
summary owns the accessible name and keyboard interaction, while every hidden path segment remains
a real `BreadcrumbLink`.

## Framework Availability
Breadcrumb is available for Astro and React.
Astro available; React available
| Framework | Status | Notes |
| --- | --- | --- |
| Astro | available | - |
| React | available | - |
## API Reference
### Breadcrumb
- Inherits nav attributes.

### BreadcrumbList
- Inherits ol attributes.

### BreadcrumbItem
- Inherits li attributes.

### BreadcrumbLink
| Prop | Type | Required | Default | Kind | Description |
| --- | --- | --- | --- | --- | --- |
| `asChild` | `boolean` | No | `false` | Wrapper prop | Merges the component behavior and props into its child element. |
- Inherits a attributes.

### BreadcrumbPage
- Inherits span attributes.

### BreadcrumbSeparator
- Inherits li attributes.

### BreadcrumbEllipsis
- Inherits span attributes.

## Changelog

### v1.2.0

- Added contract-generated Astro and React implementations while preserving the component's existing public API and styling.

### v1.1.3 

- Refactor tailwind variants functions into separate `variants.ts` file

### 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