Breadcrumb

Show where the current page sits in the site hierarchy.

On this page

Installation

Use this component from the local workspace package. Follow the setup guide first. A public npm package and registry are not available yet.

View registry files

Usage

Import the component into your page or component file.

Usage

import { Breadcrumb } from "@dethink/components";

Examples

Try the examples, then open the code to use them in your app.

Sizes and separators

Use chevrons, slashes, dots, and size variants to match headers and compact toolbars.

Show sourceexamples/breadcrumb/basic.tsx

examples/breadcrumb/basic.tsx

"use client";

import { Breadcrumb } from "@dethink/components";

export function BreadcrumbBasic() {
  return (
    <div className="grid gap-5">
      <Breadcrumb
        items={[
          { key: "home", label: "Home", href: "/" },
          { key: "workspaces", label: "Workspaces", href: "/workspaces" },
          { key: "operations", label: "Operations" },
        ]}
      />
      <Breadcrumb
        separator="slash"
        size="sm"
        items={[
          { key: "settings", label: "Settings", href: "/settings" },
          { key: "access", label: "Access", href: "/settings/access" },
          { key: "sso", label: "SSO policy" },
        ]}
      />
      <Breadcrumb
        separator="dot"
        size="lg"
        items={[
          { key: "reports", label: "Reports", href: "/reports" },
          { key: "pipeline", label: "Pipeline", href: "/reports/pipeline" },
          { key: "detail", label: "Revenue detail" },
        ]}
      />
      <Breadcrumb
        separator={
          <span className="text-info font-mono text-[0.7em] font-semibold">
            {"<>"}
          </span>
        }
        items={[
          { key: "teams", label: "Teams", href: "/teams" },
          {
            key: "permissions",
            label: "Permissions",
            href: "/teams/permissions",
          },
          { key: "audit", label: "Audit trail" },
        ]}
      />
    </div>
  );
}

Collapsed overflow

Long data-driven paths collapse hidden ancestors behind a labelled Popover trigger.

Show sourceexamples/breadcrumb/overflow.tsx

examples/breadcrumb/overflow.tsx

"use client";

import { Breadcrumb } from "@dethink/components";

export function BreadcrumbOverflowExample() {
  return (
    <Breadcrumb
      maxItems={4}
      overflowLabel="Show hidden breadcrumb items"
      items={[
        { key: "home", label: "Home", href: "/" },
        { key: "platform", label: "Platform", href: "/platform" },
        {
          key: "workspaces",
          label: "Workspaces",
          href: "/platform/workspaces",
        },
        {
          key: "operations",
          label: "Operations",
          href: "/platform/workspaces/operations",
        },
        {
          key: "reports",
          label: "Reports",
          href: "/platform/workspaces/operations/reports",
        },
        { key: "current", label: "Revenue pipeline detail" },
      ]}
    />
  );
}

Router composition

asChild merges BreadcrumbLink styling onto framework router links.

Show sourceexamples/breadcrumb/router.tsx

examples/breadcrumb/router.tsx

"use client";

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@dethink/components";
import NextLink from "next/link";

export function BreadcrumbRouter() {
  return (
    <Breadcrumb aria-label="Router breadcrumb">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <NextLink href="/components">Components</NextLink>
          </BreadcrumbLink>
          <BreadcrumbSeparator />
        </BreadcrumbItem>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <NextLink href="/components/navigation-menu">Navigation</NextLink>
          </BreadcrumbLink>
          <BreadcrumbSeparator />
        </BreadcrumbItem>
        <BreadcrumbItem current>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Recipes

Examples that combine components for common tasks.

Object detail header

Breadcrumb fits above a detail title and actions without owning page-header layout.

Acme Operations

Contract renewal, usage limits, support tier, and workspace access for the enterprise account.

Show sourceexamples/breadcrumb/recipe-page-header.tsx

examples/breadcrumb/recipe-page-header.tsx

"use client";

import { Breadcrumb, Button } from "@dethink/components";

export function BreadcrumbRecipePageHeader() {
  return (
    <div className="border-border bg-card grid gap-4 rounded-lg border p-4">
      <Breadcrumb
        size="sm"
        maxItems={4}
        items={[
          { key: "home", label: "Home", href: "/" },
          { key: "customers", label: "Customers", href: "/customers" },
          {
            key: "enterprise",
            label: "Enterprise",
            href: "/customers/enterprise",
          },
          {
            key: "accounts",
            label: "Accounts",
            href: "/customers/enterprise/accounts",
          },
          { key: "current", label: "Acme Operations" },
        ]}
      />
      <div className="flex min-w-0 flex-wrap items-start justify-between gap-4">
        <div className="min-w-0 space-y-1">
          <h3 className="font-heading text-foreground truncate text-2xl font-semibold tracking-tight">
            Acme Operations
          </h3>
          <p className="text-muted-foreground max-w-2xl text-sm leading-6">
            Contract renewal, usage limits, support tier, and workspace access
            for the enterprise account.
          </p>
        </div>
        <div className="flex shrink-0 items-center gap-2">
          <Button variant="outline">Export</Button>
          <Button>Open record</Button>
        </div>
      </div>
    </div>
  );
}

Props

Breadcrumb renders a nav landmark and either data-driven items or compound children.

Breadcrumb props
Prop	What it does	Default
`itemsBreadcrumbItemData[]`	Data-driven path items with key, label, href, onAction, current, disabled, and optional icon.	Not set
`childrenReactNode`	Compound anatomy for custom router links, custom separators, and manual overflow composition.	Not set
`size"sm" \| "md" \| "lg"`	Density-aware text and control sizing for headers and toolbars.	`"md"`
`separator"chevron" \| "slash" \| "dot" \| "none" \| ReactNode`	Decorative separator rendered outside the accessible breadcrumb name. Pass a ReactNode such as <span>{"<>"}</span> for custom separators.	`"chevron"`
`maxItemsnumber`	Collapses long data-driven paths into an overflow trigger.	Not set
`collapseFrom"start" \| "middle" \| "end"`	Chooses where hidden ancestors are collapsed.	`"middle"`
`preserveRootboolean`	Keeps the root item visible when a path is collapsed.	`true`
`preserveCurrentboolean`	Keeps the current item visible when a path is collapsed.	`true`
`overflowLabelstring`	Accessible label for the collapsed ancestor trigger.	`"Show breadcrumb path"`
`…nav propsHTMLAttributes<HTMLElement>`	Includes aria-label and aria-labelledby for the nav landmark.	Not set