<!-- source-hash: cb8e8ae598fa4e3046aa0545d0ea86b2 -->
Accessible breadcrumb navigation component built on semantic HTML with full ARIA support, using Radix UI's `Slot` for flexible rendering.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `Breadcrumb` | `nav` wrapper | Root container with `aria-label="breadcrumb"` |
| `BreadcrumbList` | `ol` element | Ordered list of breadcrumb items |
| `BreadcrumbItem` | `li` element | Individual breadcrumb entry wrapper |
| `BreadcrumbLink` | `a` element | Clickable navigation link; supports `asChild` for custom renderers |
| `BreadcrumbPage` | `span` element | Current page indicator (`aria-current="page"`, non-interactive) |
| `BreadcrumbSeparator` | `li` element | Visual divider, defaults to `ChevronRight`; accepts custom children |
| `BreadcrumbEllipsis` | `span` element | Collapsed items indicator using `MoreHorizontal` icon |

## Usage Example

```typescript
import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@/components/ui/breadcrumb"

export function AppBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Profile</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}
```

> **`asChild` pattern:** Pass `asChild` to `BreadcrumbLink` to delegate rendering to a child component (e.g., a router `Link`), inheriting all props via Radix UI `Slot`.