Breadcrumb · paneui

Installation

pnpm dlx shadcn@latest add @paneui/breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Composition

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   ├── BreadcrumbLink
    │   ├── BreadcrumbEllipsis
    │   └── BreadcrumbPage
    └── BreadcrumbSeparator

BreadcrumbTrail (renders all of the above from items)

Examples

Custom Separator

Use a custom separator, like a slash, for file paths.

With Icons

Trail Options

Static Ellipsis

Use a static ellipsis when the hidden crumbs aren't worth navigating to.

Sizes

RTL

Motion

Each crumb fades and slides in 4px when it mounts, e.g. when navigating deeper. With reduced motion it appears at once.

Accessibility

Breadcrumb is a nav labelled "Breadcrumb". BreadcrumbPage is marked aria-current="page", and separators are hidden from screen readers.

API Reference

Also accepts every prop of nav.

aria-label= "Breadcrumb": string; Accessible name of the nav.

Prop	Type	Default	Description
aria-label	string	"Breadcrumb"	Accessible name of the nav.

BreadcrumbList

Wrapping row of crumbs. Also accepts every prop of ol.

size= "default": "sm" | "default" | "lg"; Crumb height 24, 28 or 32px and text size, for every part inside.

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	"default"	Crumb height 24, 28 or 32px and text size, for every part inside.

data-size: The size value.

Data attribute	Description
data-size	The `size` value.

BreadcrumbItem

One crumb; fades in on mount. Also accepts every prop of li.

BreadcrumbLink

A link crumb. Icons inside it, or inside BreadcrumbPage, are sized to 14px. Also accepts every prop of a.

render: ReactElement | (props, state) => ReactElement; Replace the <a>, e.g. with a router Link.

Prop	Type	Default	Description
render	ReactElement \| (props, state) => ReactElement	—	Replace the `<a>`, e.g. with a router `Link`.

BreadcrumbPage

The current page, with aria-current="page". Also accepts every prop of span.

BreadcrumbSeparator

Also accepts every prop of li.

children= <ChevronRightIcon />: ReactNode; Separator glyph.

Prop	Type	Default	Description
children	ReactNode	<ChevronRightIcon />	Separator glyph.

BreadcrumbEllipsis

The "…" crumb. With items it is a button that opens a menu of the hidden crumbs; without them it is a plain marker. Also accepts every prop of span.

items: { label: ReactNode; href?: string; icon?: ReactNode; onClick?: () => void }[]; Hidden crumbs listed in the menu.
label= "Show hidden breadcrumbs": string; Accessible name of the menu button.

Prop	Type	Default	Description
items	{ label: ReactNode; href?: string; icon?: ReactNode; onClick?: () => void }[]	—	Hidden crumbs listed in the menu.
label	string	"Show hidden breadcrumbs"	Accessible name of the menu button.

data-popup-open: Present on the menu button while its menu is open.

Data attribute	Description
data-popup-open	Present on the menu button while its menu is open.

BreadcrumbTrail

Renders a whole breadcrumb from items; the last item is the current page. Also accepts every prop of nav.

size= "default": "sm" | "default" | "lg"; Passed to BreadcrumbList.
items*: { label: ReactNode; href?: string; icon?: ReactNode; onClick?: () => void }[]; Crumbs from root to current page.
maxItems= 4: number; Collapse the middle once there are more items than this.
itemsBeforeCollapse= 1: number; Crumbs kept before the ellipsis.
itemsAfterCollapse= 2: number; Crumbs kept after the ellipsis.
separator: ReactNode; Replaces the chevron between crumbs.

Prop	Type	Default	Description
size	"sm" \| "default" \| "lg"	"default"	Passed to `BreadcrumbList`.
items*	{ label: ReactNode; href?: string; icon?: ReactNode; onClick?: () => void }[]	—	Crumbs from root to current page.
maxItems	number	4	Collapse the middle once there are more items than this.
itemsBeforeCollapse	number	1	Crumbs kept before the ellipsis.
itemsAfterCollapse	number	2	Crumbs kept after the ellipsis.
separator	ReactNode	—	Replaces the chevron between crumbs.