Breadcrumb

Stable

Shows where the current page sits in the hierarchy and gives one-click access to every level above it.

examples/breadcrumb/demo.tsx

Anatomy

1LinkAn ancestor level. Uses the destination page's title.
2SeparatorA quiet slash by default; hidden from assistive technology.
3Current pageThe last item. Not a link, marked with aria-current="page".

Installation

$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/breadcrumb.json

Usage

import Link from "next/link"

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<Link href="/docs" />}>Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

BreadcrumbLink renders an <a> by default; pass your router's link through render to keep client-side navigation. The last item is a BreadcrumbPage — the current location, which is not a link.

Examples

Default

prfct separates levels with a light slash. It reads as a path, takes less space than a chevron, and stays quiet next to the links.

examples/breadcrumb/demo.tsx

Custom separator

Pass any icon as the child of BreadcrumbSeparator. Chevrons suit settings and file hierarchies where the trail represents drilling down.

examples/breadcrumb/custom-separator.tsx

Collapsed

When a trail has more than four levels, keep the root and the last two, and collapse the middle into a Dropdown Menu behind an ellipsis. Nothing becomes unreachable.

examples/breadcrumb/collapsed.tsx

A house icon can stand in for the root when the product name is already visible in the header — give it an aria-label. Icons in the middle of a trail should mark the type of a level, not decorate it.

examples/breadcrumb/with-icon.tsx

Switcher

In apps, the last segment can double as a switcher between siblings — projects in a team, branches in a repo. The trigger keeps the look of the current page; the menu marks the active item.

examples/breadcrumb/switcher.tsx

Guidelines

When to use

In hierarchies three or more levels deep — docs, file systems, settings, e-commerce categories.
When people land deep in a structure from search or a shared link and need to orient themselves.

When not to use

In flat sites with one or two levels — the page title is enough.
To show a sequence of steps or history — breadcrumbs describe location, not the path someone took. Use a stepper for multi-step flows.
As the primary navigation. Breadcrumbs complement a Sidebar or Navigation Menu; they don't replace them.

Content

Each item uses the destination page's title, shortened only if needed. Don't link the current page, don't repeat it right below as the page title in a different wording, and don't add a trailing separator.

Do.Parent levels link up; the current page is plain text.

Don’t.A trailing separator and a linked current page lead nowhere new.

Placement

Put the breadcrumb above the page title, left-aligned with it, in the page's content column. On narrow screens, collapse to the root and the parent level, or show only a Back to parent link.

Accessibility

Landmark. Breadcrumb renders a <nav> labelled Breadcrumb (translated by LocaleProvider), so screen reader users can jump to it from the landmarks list.
Order. Items are an ordered list (<ol>), which conveys the hierarchy and the number of levels.
Current page. BreadcrumbPage is exposed as a disabled link with aria-current="page", so it's announced as the current location, and it isn't focusable.
Separators are aria-hidden, so they aren't announced between levels.
Collapsed levels need a trigger with an accessible name, such as Show hidden path.

Key	Behavior
`Tab`	Moves focus through the links in order. The current page is skipped.
`Enter`	Follows the focused link.

Prop	Type	Default
`href` Destination of the link.	`string`	No default
`render` Render a framework link, e.g. `<Link href="/docs" />`, keeping prfct's styles.	`ReactElement \| (props, state) => ReactElement`	No default

BreadcrumbPage

The current location. Renders a <span> with aria-current="page".

BreadcrumbSeparator

Prop	Type	Default
`children` Replaces the default slash, e.g. with `<ChevronRightIcon />`.	`ReactNode`	`"/"`

BreadcrumbEllipsis

A ⋯ glyph for collapsed levels, announced as More in the language set by LocaleProvider. Inside a trigger, give the trigger a name of its own that says what it reveals.