# Breadcrumb

> Show where a page sits in a hierarchy.

- Type: Component (disclosure)
- Access: Free, open source
- Page: https://uiarc.dev/components/breadcrumb
- Markdown: https://uiarc.dev/components/breadcrumb/markdown
- Registry item: https://uiarc.dev/r/breadcrumb.json
- Source file: `registry/components/breadcrumb/breadcrumb.tsx`
- Dependencies: motion, lucide-react
- Keywords: navigation, wayfinding, react breadcrumb, breadcrumb navigation, animated breadcrumb, page path, nextjs breadcrumb, hierarchy navigation

## When to use

- Showing where a page sits in a hierarchy, such as Workspace, Settings, Billing.
- Client-side paths like a file browser, where crumbs call onClick instead of navigating.
- Paths that grow as people drill in, where new crumbs should slide in.

## When not to use

- Use tree-view when people need to browse the whole hierarchy.
- Use tabs for switching between sibling views.
- Use pagination for moving through pages of a list.

## Installation

### CLI

Run one of these in a project set up with `shadcn init`:

```bash
npx shadcn@latest add @uiarc/breadcrumb
pnpm dlx shadcn@latest add @uiarc/breadcrumb
yarn dlx shadcn@latest add @uiarc/breadcrumb
bunx --bun shadcn@latest add @uiarc/breadcrumb
```

The `@uiarc` name needs `"registries": { "@uiarc": "https://uiarc.dev/r/{name}.json" }` in `components.json`. Without it, use the full URL:

```bash
npx shadcn@latest add https://uiarc.dev/r/breadcrumb.json
```

### Manual

1. Install the dependencies:

```bash
npm install motion lucide-react
```

2. Copy the source into your project. Main file: `registry/components/breadcrumb/breadcrumb.tsx`

   The source is in the registry item: https://uiarc.dev/r/breadcrumb.json

3. Arc imports use the `@/` alias for `registry/` and `lib/`. Keep the same folders or update the import paths.

## Usage

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

export function SettingsPath() {
  return (
    <Breadcrumb
      items={[
        { label: "Workspace", href: "/" },
        { label: "Settings", href: "/settings" },
        { label: "Billing" },
      ]}
    />
  );
}
```

## API reference

### Breadcrumb

A path of links where the last item is the current page. Crumbs added later slide in.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `{ label: string; href?: string; onClick?: (event: MouseEvent<HTMLElement>) => void }[]` | – | Path from root to current page. Items with href render next/link; items with only onClick render buttons. |
| `ariaLabel` | `string` | `"Breadcrumb"` | Label for the nav landmark. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Moves between crumb links and buttons. |
| Enter | Follows the focused crumb. |

## Accessibility

- Renders a nav landmark with an ordered list.
- The last item is a span with aria-current="page" and is never a link.
- Chevron separators are aria-hidden.

## Motion

- Crumbs present on first render stay still; new crumbs slide in 8px from the left out of a blur while siblings shift on a smooth spring.
- Reduced motion adds and removes crumbs without movement.

## Responsive behavior

- The list wraps onto new lines on narrow screens; individual crumbs never wrap internally.
- It does not truncate or collapse long paths, so keep labels short or shorten the path on mobile yourself.

## Performance

- Crumbs use layout position animation only when the path changes; static paths do not animate.

## Notes for AI

- Use for hierarchical page location. For client-side paths such as a file browser, pass onClick without href.
- Keep labels short; the component does not truncate or collapse long paths.

## Related

- [Tree view](https://uiarc.dev/components/tree-view/markdown): Navigate nested folders and structured content.
- [Pagination](https://uiarc.dev/components/pagination/markdown): Move through a long collection with clear bounds.
- [Tabs](https://uiarc.dev/components/tabs/markdown): Switch between related content in the same context.

## Guidance for AI tools

Breadcrumb: Show where a page sits in a hierarchy. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt