# Breadcrumb

> Where you are and the way back: a long trail folds its middle into "…", which opens the hidden crumbs in place one after another.

Long breadcrumbs either wrap onto two lines or cut the middle off for good. Here, past a limit, the middle folds into "…"; pressing it opens the hidden crumbs in place, each easing its width open with a short stagger. The last crumb is the current page, not a link.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/breadcrumb.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: none
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/breadcrumb
- Registry item (source): https://hairlineui.com/r/breadcrumb.json

## Usage

```tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";

<Breadcrumb items={[{ label: "Projects", href: "/projects" }, { label: "Northwind", href: "/projects/northwind" }, { label: "Assets" }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `Crumb[]` | – | label, href, icon, onClick. |
| `max` | `number` | `4` | Crumbs before the middle folds. |

## States

- **folded**: "…" stands in for the middle crumbs.
- **opened**: Each hidden crumb's width eases open (380ms, 40ms apart) and fades in.

## What it handles

Breadcrumbs fail on deep trails; folding keeps one line without losing the way back.

- **Folding middle**: First and last two stay; the rest fold into "…".
- **Opens in place**: Widths ease open with a 40ms stagger.
- **Current page**: aria-current="page", not a link.
- **Links or buttons**: href for routing, onClick for app state.

## Replaces

breadcrumb, truncation logic

## Where it fits

- **File browsers**: Workspace / Projects / Northwind / Assets.
- **Docs**: Section and page above the title.
- **Admin panels**: Customers / Ada Okafor / Invoices.
- **Shops**: Category trails above a product.

## Notes

- A nav landmark labelled "Breadcrumb" with an ordered list.
- Reduced motion: the crumbs appear at once.

License: MIT (https://hairlineui.com/license#components)