Breadcrumb

A Breadcrumb is a labelled nav that contains a BreadcrumbList. The list holds BreadcrumbItem parts separated by BreadcrumbSeparator parts. Each item contains either a BreadcrumbLink to an ancestor page or, for the last item, a BreadcrumbPage for the current page. Use BreadcrumbEllipsis inside an item to stand in for collapsed levels.

Use breadcrumbs in deep hierarchies so people can see their location and move up quickly. For top-level navigation between sections, use a navigation menu or tabs.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/breadcrumb

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add breadcrumb

Manual

Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react @phosphor-icons/react

Copy the source into components/ui/breadcrumb.tsx:

Update the import paths to match your project.

Usage

import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis }

<Breadcrumb

Place a BreadcrumbSeparator between items as its own sibling, not inside a BreadcrumbItem. It renders a caret by default; pass children to use a different separator.

BreadcrumbLink renders an a by default and can render your router's link component instead.

Use the render prop to render your router's link component: render={<Link href="/" />}.

Set asChild on BreadcrumbLink and pass your router's link component as the child.

Pass a render function to BreadcrumbLink that returns your router's link component with the props it receives.

For an icon-only link, such as a home icon, add an aria-label.

Examples

With home icon

Replaces the first link with a home icon and an aria-label.

With ellipsis

Collapses middle levels with BreadcrumbEllipsis.

Custom separator

Uses a slash instead of the default caret separator.

API Reference

Anatomy7 parts

</BreadcrumbItem>

The nav landmark that wraps the trail.

Also accepts the props of React.ComponentProps<"nav">.

BreadcrumbList

The ordered list of items.

Also accepts the props of React.ComponentProps<"ol">.

BreadcrumbItem

A single step in the trail.

Also accepts the props of React.ComponentProps<"li">.

BreadcrumbLink

A link to an ancestor page.

Also accepts the props of useRender.ComponentProps<"a">.

BreadcrumbPage

The current page, rendered as plain text.

Also accepts the props of React.ComponentProps<"span">.

BreadcrumbSeparator

A decorative divider between items.

Also accepts the props of React.ComponentProps<"li">.

BreadcrumbEllipsis

A placeholder for collapsed levels, with a screen-reader label.

Also accepts the props of React.ComponentProps<"span">.

Accessibility

Breadcrumb renders a nav with aria-label="breadcrumb".
BreadcrumbPage sets aria-current="page".
Separators have role="presentation" and aria-hidden="true", so only items are announced as list items.
BreadcrumbEllipsis hides its icon and includes visually hidden text, More by default; pass children to change it.
Only links are in the tab order; the ellipsis and current page are skipped.

Notes

Styling hooks: data-slot values from breadcrumb through breadcrumb-ellipsis.
The default caret separator flips in right-to-left layouts.
Ancestor links use text-muted-foreground and the current page uses text-foreground.