# Breadcrumb

> The everyday breadcrumb: icons, chevron or slash separators, aria-current on the current page and router-friendly links. It measures itself and folds middle crumbs into a "…" menu, listed as an indented path, until the trail fits, then truncates the last label if it has to. Crumbs with siblings get a switcher beside them, so the trail doubles as a team, project or branch picker.

- Slug: `breadcrumb`
- Category: [Pagination](https://www.assembli.design/category/pagination.md)
- Type: component
- Tags: breadcrumb, navigation, path, switcher, responsive, overflow
- npm dependencies: @base-ui/react, lucide-react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/breadcrumb
- Page: https://www.assembli.design/components/breadcrumb

![Breadcrumb preview](https://www.assembli.design/thumbnails/breadcrumb-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `BreadcrumbItem[]` |  |  |
| `separator` | `"chevron" \| "slash"` | `"chevron"` |  |
| `size` | `"sm" \| "md"` | `"md"` |  |
| `collapse` | `"auto" \| "never" \| number` | `"auto"` | `"auto"` folds middle crumbs into a "…" menu until the trail fits its container, `"never"` lets it wrap, and a number keeps that many crumbs at most (the first one plus the last ones). |
| `renderLink` | `(props: BreadcrumbLinkProps) => React.ReactElement` | `defaultLink` | Render links with your router, e.g. `(props) => <Link {...props} />`. |
| `onSiblingSelect` | `(item: BreadcrumbItem, sibling: BreadcrumbSibling) => void` |  | Called when a sibling without an `href` is picked. |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/breadcrumb/breadcrumb.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/breadcrumb
```

Registry item JSON: https://www.assembli.design/r/breadcrumb.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.