# Breadcrumb

The path to the current page as a trail of links, composed from parts or built from a list.

```ehtml Example
import {
  Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator,
  BreadcrumbEllipsis,
} from "@elements/ui/breadcrumb";

<Breadcrumb>
  <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
</Breadcrumb>

<Breadcrumb items={trail} maxItems={4} />
```

## Parts

| Part | What it is |
|---|---|
| `Breadcrumb` | The nav landmark and its ordered list. Takes parts, or items to build the trail. |
| `BreadcrumbItem` | One step: a list item. |
| `BreadcrumbLink` | A link to an ancestor page. |
| `BreadcrumbPage` | The current page: aria-current="page", not a link. |
| `BreadcrumbSeparator` | Between items; a chevron unless the slot gives another. |
| `BreadcrumbEllipsis` | Stands in for collapsed items. |

## Attributes

### Breadcrumb

| Attribute | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"Breadcrumb"` | aria-label of the nav landmark. |
| `items` | `{ label: string; href?: string; attrs?: Record<string, ...> }[]` | `[]` | Builds the trail: separators between entries, the last one the current page (a link if it has href). attrs go on an entry's link. A new trail starts collapsed. Empty uses the slot. |
| `maxItems` | `number` | `0` | With items: collapse a longer trail behind an ellipsis button. 0 never collapses. |
| `itemsBefore` | `number` | `1` | With items: entries kept before the ellipsis. |
| `itemsAfter` | `number` | `1` | With items: entries kept after it. |
| `separator` | `IconName` | `"chevron-right"` | With items: the separator icon. |
| `separatorText` | `string` | `""` | With items: text between the entries in place of the icon, such as "›" or "/". Hidden from assistive tech, like the icon. |
| `collapsedIcon` | `IconName` | `"more-horizontal"` | With items: the icon on the ellipsis button. |
| `expandText` | `string` | `"Show the full path"` | With items: aria-label of the ellipsis button. Translate it along with label. |
| `class` | `string` | `""` | Extra classes on the nav. Every part takes class. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Other attributes for the nav: id, data-\*, or aria-labelledby to name the landmark by a visible heading (label is then left off). |

### BreadcrumbLink

| Attribute | Type | Default | Description |
|---|---|---|---|
| `href` | `string` | (required) | The link target. |
| `current` | `boolean` | `false` | The current page kept as a link: aria-current="page", page ink. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Other attributes for the anchor: title, target, rel, data-\*. |

## Slots

| Slot | Part | Content |
|---|---|---|
| `default` | `Breadcrumb` | BreadcrumbItems and BreadcrumbSeparators, when items is empty. |
| `default` | `BreadcrumbLink` | The link text, or an Icon and text. |
| `default` | `BreadcrumbPage` | The current page's name. |
| `default` | `BreadcrumbSeparator` | A replacement separator: text or an Icon. |

## Keyboard

| Keys | Action |
|---|---|
| `Tab` | Moves through the links. |
| `Enter` | Follows a link; on the ellipsis button, shows the full trail and focuses the first revealed link. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-collapsed` | present while collapsed | Breadcrumb (items) |

## Accessibility

- Follows the WAI-ARIA breadcrumb pattern: a nav landmark labelled Breadcrumb around an ordered list.
- The current page has aria-current="page"; rendered as a span it also gets role="link" and aria-disabled="true".
- Separators and the static ellipsis are role="presentation" and aria-hidden, so the trail reads as a list of links.
- The ellipsis button in items mode is labelled by expandText, "Show the full path" by default.

## See also

- [Accordion](accordion): A stack of headings that each show and hide a panel, one or several at a time.
- [Collapsible](collapsible): A trigger that shows and hides a region, with its height animated.
- [Tabs](tabs): Layered panels, one shown at a time, chosen from a list of tabs.
- [Pagination](pagination): Page numbers with previous and next, from a page count or composed from parts.
- [Tree](tree): A hierarchical list that opens with the arrow keys, selects one node or many, and loads children on demand.