---
id: "packages/active-ui/breadcrumb"
title: "Breadcrumb"
description: "The path to the current page as a row of links, with a way to fold long paths."
url: "/packages/active-ui/breadcrumb"
locale: "en"
revision: "cd7aac2eaefa725f"
---

# Breadcrumb

A breadcrumb shows where a page sits in a hierarchy, as links to each level above it and the
current page last. It is a secondary navigation: a reader uses it to go up a level, not to find a
page. This site shows one above every title.

**Example: A trail, and a long one folded behind a menu**

Client: Runs entirely in your browser. Source: `examples/ui/breadcrumb.tsx`.

```tsx
// apps/docs/examples/ui/breadcrumb.tsx
'use client';

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@workspace/active-ui/components/primitives/breadcrumb';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@workspace/active-ui/components/primitives/dropdown-menu';

/**
 * Where the page sits in its hierarchy, as links to each level and the
 * current page last. When the trail is long, the middle levels fold behind
 * an ellipsis that opens a menu with them. The links point to anchors on
 * this page; in an application they are your routes.
 */
export default function BreadcrumbExample() {
  return (
    <div className="flex flex-col gap-6">
      <Breadcrumb label="Breadcrumb">
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#breadcrumb-home">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#breadcrumb-schemes">Schemes</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Pension scheme 2026</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>

      <Breadcrumb label="Breadcrumb, shortened">
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#breadcrumb-home">Home</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <DropdownMenu>
              <DropdownMenuTrigger
                aria-label="Show the hidden levels"
                className="flex items-center"
              >
                <BreadcrumbEllipsis />
              </DropdownMenuTrigger>
              <DropdownMenuContent align="start" className="w-48">
                <DropdownMenuItem render={<a href="#breadcrumb-schemes" />}>
                  Schemes
                </DropdownMenuItem>
                <DropdownMenuItem render={<a href="#breadcrumb-scheme" />}>
                  Pension scheme 2026
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#breadcrumb-participants">
              Participants
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>Sam de Vries</BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </div>
  );
}
```

## Usage

```tsx
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@workspace/active-ui/components/primitives/breadcrumb';

<Breadcrumb label="Breadcrumb">
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/schemes">Schemes</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Pension scheme 2026</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;
```

## Anatomy

- `Breadcrumb`: the `<nav>` landmark, named by `label`.
- `BreadcrumbList` (`<ol>`) with a `BreadcrumbItem` (`<li>`) per level.
- `BreadcrumbLink`: a link to a level. `render` makes your router's link the element, for example
  `render={<Link href="/schemes" />}` with Next.js.
- `BreadcrumbPage`: the current page, not a link, with `aria-current="page"`.
- `BreadcrumbSeparator`: a chevron between items, its own `<li>` hidden from assistive technology;
  pass children for another sign.
- `BreadcrumbEllipsis`: the visible sign for folded levels. It is hidden from assistive
  technology, so the element that shows the folded levels (a menu trigger, in the example) needs
  an accessible name of its own.

## What your application provides

- `label`: the name of the landmark, such as "Breadcrumb", in your reader's language (required).
- The levels and their links. On a small screen, fold the middle levels rather than wrapping a
  long trail over several lines.

## Accessibility and keyboard

- A `<nav>` named by `label`, with an ordered list: screen readers announce the number of levels.
- Each level is an ordinary link; the current page is announced as such and is not focusable.

## API

### Breadcrumb

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `label` | `string` | yes | The name of the navigation landmark, such as "Breadcrumb". |

### Other parts

**BreadcrumbList**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

BreadcrumbList has no props of its own.

**BreadcrumbItem**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

BreadcrumbItem has no props of its own.

**BreadcrumbLink**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `render` | `ComponentRenderFn<HTMLProps, {}> \| ReactElement<unknown, string \| JSXElementConstructor<any>>` | no | Allows you to replace the component's HTML element with a different tag, or compose it with another component.  Accepts a `ReactElement` or a function that returns the element to render. |

**BreadcrumbPage**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

BreadcrumbPage has no props of its own.

**BreadcrumbSeparator**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

BreadcrumbSeparator has no props of its own.

**BreadcrumbEllipsis**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

BreadcrumbEllipsis has no props of its own.

> [!NOTE]
> **Based on shadcn/ui**
>
> This page adapts the Breadcrumb documentation of shadcn/ui (MIT licence) to
> this package; see [Third-party notices](/third-party-notices).