---

## 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()}<ChevronRight size={14} />{/snippet}
</Breadcrumb>
```

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

### 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 | 'Breadcrumb' | Accessible label for the nav element |
| class | `string` | no |  | Additional CSS classes to apply to the Breadcrumb component |
| 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 variant that controls dimensions and spacing of the Breadcrumb |
| slotClasses | `Partial<Record<BreadcrumbSlots, string>>` | no |  | Per-slot class overrides |
| unstyled | `boolean` | no |  | Remove default styles |

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