Breadcrumb

Breadcrumbs help readers understand where they are inside a nested structure without turning the page title into a full taxonomy. In this system the trail stays compact, typographic, and intentionally secondary to the current page heading.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Why This Primitive Exists

Complex information architecture needs a lightweight orientation layer. Breadcrumbs provide that context without competing with primary navigation or page titles.

• Use them for nested docs, editorial archives, category paths, and deep commerce pages.
• Prefer them when the parent-child relationship matters to the reader's next move.
• Avoid them on shallow pages where the title and local navigation already provide enough context.

Examples

Basic Trail

The baseline composition uses links for ancestors and BreadcrumbPage for the current location.

<BreadcrumbPage>Breadcrumb</BreadcrumbPage>

Collapsed Paths

Use BreadcrumbEllipsis when a long hierarchy must stay scannable.

<BreadcrumbEllipsis />

In Context

Breadcrumbs work best when paired with a focused page heading rather than repeating the entire hierarchy in large type.

Guidance

Keep The Trail Useful

• Show the meaningful parents, not every technical segment in a route.
• Keep labels short enough to scan quickly.
• If the trail is always one or two levels deep, ask whether it is needed at all.

Distinguish Ancestors From The Current Page

• Ancestors should remain links.
• The current page should use BreadcrumbPage.
• Use separators consistently so the trail reads as one pattern, not mixed punctuation.

Collapse Intentionally

• Use BreadcrumbEllipsis only when the omitted levels are obvious or recoverable elsewhere.
• Keep the first and last useful ancestors visible.
• Do not collapse so aggressively that the trail stops helping orientation.

API Reference

Exported Parts

Notable Props