Breadcrumb

A navigation aid that shows the user's current location within a hierarchy. Each item links back to a parent page, with the last item representing the current page. Built on semantic <nav> and <ol> elements.

Anatomy

<Breadcrumb> is the <nav> wrapper. BreadcrumbList is the ordered list. Each step is a BreadcrumbItem containing either a BreadcrumbLink (clickable ancestor) or a BreadcrumbPage (current, non-linked). BreadcrumbSeparator renders between items. BreadcrumbEllipsis collapses long paths.

BreadcrumbLink (ancestor)BreadcrumbSeparatorBreadcrumbPage (current)

Examples

Simple — two levels

Deep path — four levels

Collapsed — with ellipsis

Design Guidelines

Do

  • Always show the current page. The last item should be BreadcrumbPage — non-linked — so users know where they are.
  • Collapse long paths with an ellipsis. When the hierarchy is deeper than 3–4 levels, use BreadcrumbEllipsis to keep the trail scannable.
  • Mirror your URL structure. Each breadcrumb item should map to a real, navigable URL so the back trail is reliable.

Don't

  • Don't link the current page. Making the last item clickable is confusing — it goes nowhere meaningful.
  • Don't use for flat navigation. If your app has no hierarchy (single-level nav), a breadcrumb adds clutter without value.
  • Don't duplicate the page title. The breadcrumb is a trail, not a heading — keep it concise and distinct from the page's <h1>.

Developer Reference

Accessibility

  • <Breadcrumb> renders a <nav> with aria-label="breadcrumb".
  • BreadcrumbList renders an <ol> so screen readers announce item count.
  • BreadcrumbPage has aria-current="page" and aria-disabled="true" — it is not a link.
  • BreadcrumbSeparator and BreadcrumbEllipsis are both aria-hidden so they are skipped by screen readers.
  • BreadcrumbLink accepts a render prop to swap in a router link (e.g. Next.js <Link>).

Usage

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

// Basic three-level path
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

// Collapsed with ellipsis
<BreadcrumbItem>
  <BreadcrumbEllipsis />
</BreadcrumbItem>

// With Next.js Link
<BreadcrumbLink render={<Link href="/components" />}>
  Components
</BreadcrumbLink>