Components

Breadcrumb

A semantic breadcrumb trail — <nav><ol> with aria-current="page" on the last item. BreadcrumbBasic takes flat { label, href } crumbs (root first, current page last); intermediate crumbs with an href are links, the current page is plain text. Data, not slots, because a trail is uniform path data a CMS/router produces directly — and the primitive parts are exported for anything bespoke.

Install

npx shadcn@latest add @alix/breadcrumb

Preview

Usage

<BreadcrumbBasic
  crumbs={[
    { label: "Home", href: "/" },
    { label: "Engagements", href: "/engagements" },
    { label: "Project Atlas" },
  ]}
/>

Examples

Short product trail

A two-crumb trail is enough when the parent route is the only useful way back.

<BreadcrumbBasic
  crumbs={[
    { label: "Dashboard", href: "/dashboards" },
    { label: "Finance" },
  ]}
/>

Collapsing a long trail

Set maxItems to fold the middle of a deep path into an ellipsis — the first crumb and the tail always stay visible.

<BreadcrumbBasic
  maxItems={3}
  crumbs={[
    { label: "Home", href: "/" },
    { label: "Engagements", href: "/engagements" },
    { label: "Confidential", href: "/engagements/confidential" },
    { label: "Liquidity review", href: "/engagements/liquidity" },
    { label: "Working papers" },
  ]}
/>

Composing the primitives

Drop below BreadcrumbBasic for anything bespoke — here a quieter slash separator, built from the exported parts.

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/services">Services</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <span className="text-muted-foreground">/</span>
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbLink href="/services/transactions">Transactions</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator>
      <span className="text-muted-foreground">/</span>
    </BreadcrumbSeparator>
    <BreadcrumbItem>
      <BreadcrumbPage>Vendor diligence</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Above a page header

Breadcrumbs provide path context while the header action remains a Button beside the page title.

Turnaround outlook

Weekly view of distressed-market signals.

<div className="w-full max-w-xl space-y-4">
  <BreadcrumbBasic
    crumbs={[
      { label: "Home", href: "/" },
      { label: "Insights", href: "/insights" },
      { label: "Turnaround outlook" },
    ]}
  />
  <div className="flex flex-wrap items-center justify-between gap-3 border border-border p-4">
    <div>
      <h2 className="text-sm font-medium text-foreground">Turnaround outlook</h2>
      <p className="text-sm text-muted-foreground">
        Weekly view of distressed-market signals.
      </p>
    </div>
    <Button size="sm" variant="outline">Share</Button>
  </div>
</div>

When to use it

Use it for

Router- or CMS-produced path trails on deep insight, service, engagement, or product pages.
Current-page context above a heading when users may need to climb back up the hierarchy.
Plain data arrays where every crumb is part of the same uniform trail.

Reach for something else

Moving between pages of a result set — use Pagination instead.
Switching sibling views within the same object — use Tabs instead.
Primary dashboard navigation — use DashboardShell navigation instead.

Props

Prop	Type	Default	Description
crumbs	BreadcrumbCrumb[]	—	The trail as flat data — { label: string, href?: string }[]. The last crumb is always the current page, rendered as non-interactive aria-current text regardless of href.
maxItems	number	—	Collapse the middle of a long trail into a non-interactive ellipsis once there are more than this many crumbs, always keeping the first and the tail. Omit for no collapse.
primitives	compose lower layer	—	Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, and BreadcrumbEllipsis are all exported — compose them for custom separators, framework links (BreadcrumbLink's render prop), or a reachable ellipsis menu.