Breadcrumb

Show where the current page sits in the site hierarchy.

On this page

Installation

Install component source from the public registry, or use the local workspace package. Follow the setup guide first. The npm package is not published yet.

View registry files

Built with

React Aria Components (react-aria-components)
Accessible interaction primitives, including keyboard behavior, focus handling, and ARIA semantics.

React Aria (react-aria) · via shared Dethink components
Accessibility hooks and overlay utilities used by the implementation.

Shared foundation: React, clsx for conditional classes, tailwind-merge for resolving utility-class conflicts. Styles use Tailwind CSS and Dethink CSS variables.

Based on this component’s source and registry composition. Libraries used only in showcase examples are excluded.

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