# Breadcrumb

> Hierarchy trail that collapses long paths and works with any router link.

Component · Free · https://lodeui.com/components/breadcrumb

## When to use

- Showing where a page sits in a hierarchy.

## When not to use

- Flat sites with one level.

## Installation

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

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import Link from "next/link";
import { Breadcrumb } from "@/components/ui/breadcrumb";

export function Trail() {
  return <Breadcrumb linkAs={Link} items={[{ label: "Projects", href: "/projects" }, { label: "Atlas", href: "/projects/atlas" }, { label: "Settings" }]} />;
}
```

## API reference

### Breadcrumb

A nav of links; middle items collapse into an ellipsis menu when there are too many.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ label; href?; icon? }[]` | – | The last item is the current page. |
| maxItems | `number` | `5` | Collapse beyond this. |
| linkAs | `ElementType` | `"a"` | Your router's link, e.g. Next.js Link. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move between links |

## Accessibility

- nav with aria-label="Breadcrumb"; the current page has aria-current="page".
- Separators are aria-hidden.

## Responsive behavior

- Lower maxItems on phones to keep it on one line.

## Performance

- Static links.

## Notes for AI

- Pass Next.js Link as linkAs for client navigation.

## Related

- [Pagination](https://lodeui.com/components/pagination) — Page numbers with ellipses and a gliding current-page indicator.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.