# Breadcrumb

> Hierarchical page location trail; the last item is the current page (non-linked)

- Tier: patterns
- Storybook: `Components/Breadcrumb`
- Import: `import { Breadcrumb } from '@amezquita/design-system/components/patterns/Breadcrumb'`

## Props

| Prop | Type | Description |
|---|---|---|
| `items` | `{ label: string; href?: string }[]` |  |
| `separator?` | `React.ReactNode` |  |
| `className?` | `string` |  |
| `aria-label?` | `string` | Names the `<nav>` landmark. Defaults to "Breadcrumb"; give each breadcrumb on a page a different name. |
| `LinkComponent?` | `React.ElementType<{ href: string; className?: string; children?: React.ReactNode }>` | Component to render internal links with — pass your router's Link (e.g. next/link) to get client-side navigation. Defaults to a plain &lt;a&gt;, which works anywhere with a full navigation. |

Also accepts all props of: `Omit<React.ComponentPropsWithoutRef<'nav'>, 'children'>`

## Tokens

| Token | Type | Value |
|---|---|---|
| `--breadcrumb-current-max-width` | dimension | `240px` |
| `--breadcrumb-font-size` | dimension | `14px` |
| `--breadcrumb-item-max-width` | dimension | `200px` |

## Usage example

```tsx
<Breadcrumb
  items={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Design System' },
  ]}
/>
```