---

## Breadcrumb
Navigation aid showing the current page's location in a hierarchy.
Renders an accessible nav with structured items and customizable separators.

**Import:** `import { Breadcrumb } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Breadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Products', href: '/products' },
  { label: 'Widget' }
]} />
```

```svelte
<Breadcrumb items={breadcrumbs} size="sm">
  {#snippet separator()}<ChevronRightIcon size={14} />{/snippet}
</Breadcrumb>
```

```svelte
<Breadcrumb items={deepTrail} maxItems={4} />
```

```svelte
<Breadcrumb items={[
{ label: 'Home', href: '/', icon: HomeIcon },
{ label: 'Settings' }
]} />
```

### Variants
- size: lg, md, sm (default: md)
- wrap: false, true (default: true)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| items | `BreadcrumbItem[]` | yes |  | Ordered breadcrumb items (last item is current page) |
| ...BreadcrumbVariants | `VariantProps` | no |  | Styling variants from BreadcrumbVariants |
| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| aria-label | `string` | no |  | Accessible label for the nav element. Defaults to the localized `accessibility.breadcrumb`. |
| class | `string` | no |  | Custom CSS class. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| expandLabel | `string` | no |  | Accessible label for the "…" button that expands a collapsed trail. Defaults to the localized `accessibility.breadcrumbExpand`. |
| itemsAfterCollapse | `number` | no | 1 | Trailing items kept visible when collapsed; the current page is always included. |
| itemsBeforeCollapse | `number` | no | 1 | Leading items kept visible when collapsed. |
| maxItems | `number` | no |  | Collapse the trail when it has more than this many items: the middle items fold into a single "…" button that expands the full trail on click. The first `itemsBeforeCollapse` and last `itemsAfterCollapse` items stay visible (the current page is always kept). Omit to never collapse. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Breadcrumb: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
| separator | `Snippet` | no |  | Custom separator snippet (default: "/") |
| size | `'sm' | 'md' | 'lg'` | no | 'md' | Size |
| slotClasses | `Partial<Record<BreadcrumbSlots, string>>` | no |  | Per-slot class overrides. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| unstyled | `boolean` | no |  | Remove default styles |
| wrap | `boolean` | no | true | Let the trail wrap onto multiple lines (`true`, default) or keep it on a single line where the current page truncates and the ancestor links hold their width (`false`). Use `false` for tight single-line bars such as a sticky header or toolbar. |

Inherited from:
- BreadcrumbVariants (external)
- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)

### Types
```ts
interface BreadcrumbItem {
/** Display label */
  label: string;
  /**
   * Leading icon rendered before the label, inside the crumb's own link (or
   * inside the current-page span for the last item). Pass the icon *component*
   * — `import { HomeIcon } from '@urbicon-ui/blocks'` — never an icon name: a
   * name has to be resolved through the registry at runtime, and that dynamic
   * lookup drags all 315 icons into the consumer bundle (see
   * docs/ICON-DESIGN.md). Decorative by contract — the icon is wrapped in an
   * `aria-hidden` span, so the crumb still announces as its `label` alone.
   * Give an icon-led crumb an `aria-label` if its `label` is too terse to
   * stand on its own.
   */
  icon?: IconComponent;
  /** Navigation URL (omit for current page) */
  href?: string;
  /**
   * Click handler. Use alongside or instead of `href` when navigation
   * happens through a client-side router or shouldn't follow the link
   * (e.g. demos with non-existent routes — call `event.preventDefault()`).
   */
  onclick?: (event: MouseEvent) => void;
  /**
   * Accessible name override for this crumb, replacing `label` for assistive
   * technology.
   *
   * On a linked crumb this is an `aria-label` on the `<a>`, which every
   * implementation honours. On the current page it rides on a generic element,
   * and implementations disagree there: Chrome computes the name, while a
   * strict ARIA 1.2 reading ignores an author name on `generic` and falls back
   * to the content. So give an icon-led last crumb a real `label` rather than
   * relying on the override alone.
   */
  'aria-label'?: string;
}
```

```ts
type IconComponent = Component<IconProps>
```

### Slots (slotClasses keys)
`nav`, `list`, `item`, `link`, `currentPage`, `icon`, `ellipsis`, `separator`