# Breadcrumbs

Hierarchical trail for the current page. Pass `items` with stable `id`s; omit `href` on the current crumb.

## Examples

### Default

A short trail ending on the current page.

```tsx
import { Breadcrumbs } from '@var-ui/react';

<Breadcrumbs
  items={[
    { id: 'home', label: 'Home', href: '/' },
    { id: 'docs', label: 'Docs', href: '/docs' },
    { id: 'current', label: 'Breadcrumbs' },
  ]}
/>
```

```astro
---
import { Breadcrumbs } from '@var-ui/astro';
---
<Breadcrumbs
  items={[
    { id: 'home', label: 'Home', href: '/' },
    { id: 'docs', label: 'Docs', href: '/docs' },
    { id: 'current', label: 'Breadcrumbs' },
  ]}
/>
```

```html
<nav class="var-ui-breadcrumbs" aria-label="Breadcrumb">…</nav>
```

### Collapse

Set `maxItems` so long trails collapse to an ellipsis that expands on click (`itemsBeforeCollapse` / `itemsAfterCollapse` default to 1).

```tsx
import { Breadcrumbs } from '@var-ui/react';

<Breadcrumbs
  maxItems={3}
  items={[
    { id: 'home', label: 'Home', href: '/' },
    { id: 'products', label: 'Products', href: '/products' },
    { id: 'hardware', label: 'Hardware', href: '/products/hardware' },
    { id: 'laptops', label: 'Laptops', href: '/products/hardware/laptops' },
    { id: 'current', label: 'Pro 16' },
  ]}
/>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| items | BreadcrumbItemData[] | yes |  |  |
| className | string \| undefined | no |  |  |
| itemsAfterCollapse | number \| undefined | no | 1 | Trailing items kept visible after the collapse point. |
| itemsBeforeCollapse | number \| undefined | no | 1 | Leading items kept visible before the collapse point. |
| label | string \| undefined | no | 'Breadcrumb' | Accessible name for the nav landmark. |
| maxItems | number \| undefined | no |  | Collapse to an ellipsis once `items.length` exceeds this. |
| onAction | ((id: string) => void) \| undefined | no |  | Fires with the pressed item's `id` (not called for the current item). |
| separator | string \| undefined | no | '/' | Separator string rendered between items via CSS `content`. |

## Accessibility

The root is a `nav` landmark (`label` defaults to `"Breadcrumb"`). Built on RAC breadcrumbs; the ellipsis control is a button labeled “Show all breadcrumbs”.