Breadcrumb

Displays the path to the current resource using a hierarchy of links.

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Breadcrumb shows the hierarchical path to the current page, at the top of the content. Every segment is clickable except the last one (rendered as BreadcrumbPage). Use BreadcrumbEllipsis to collapse a path that is too long, optionally combined with DropdownMenu to reveal the hidden segments.

Installation

Terminal

$ bext ui add breadcrumb

Copy and paste the following into src/components/ui/breadcrumb.tsx.

breadcrumb.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbEllipsis />
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@bext-stack/ui/primitives"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="/components">Components</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Anatomy

<Breadcrumb>
  └── <BreadcrumbList>
      ├── <BreadcrumbItem>
      │   └── <BreadcrumbLink href="/">Home</BreadcrumbLink>
      ├── <BreadcrumbSeparator />
      ├── <BreadcrumbItem>
      │   └── <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
      ├── <BreadcrumbSeparator />
      └── <BreadcrumbItem>
          └── <BreadcrumbPage>Components</BreadcrumbPage>

API Reference

Prop	Type	Default	Description
children	ReactNode	—	A BreadcrumbList. Rendered inside a <nav>.
ariaLabel	string	"breadcrumb"	aria-label of the <nav>.
items	{ label: string; href?: string }[]	—	Shorthand: generates the list, with chevron separators and the last entry as the current page.
className	string	—	Extra classes on the <nav>.

BreadcrumbList

Prop	Type	Default	Description
className	string	—	Extra classes on the <ol>.
children	ReactNode	—	Rendered as <ol>. Default: flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground.

BreadcrumbItem

Prop	Type	Default	Description
className	string	—	Extra classes on the <li>.
children	ReactNode	—	Rendered as <li>. Default: inline-flex items-center gap-1.5.

BreadcrumbLink

Prop	Type	Default	Description
href	string	"#"	Target of the segment link.
className	string	—	Extra classes on the <a>.
children	ReactNode	—	Clickable segment. hover:text-foreground.

BreadcrumbPage

Prop	Type	Default	Description
className	string	—	Extra classes on the .
children	ReactNode	—	Current segment (not clickable). Rendered as .

BreadcrumbSeparator

Prop	Type	Default	Description
className	string	—	Extra classes on the <li>, which is role="presentation" and aria-hidden.
children	ReactNode	—	Default: chevron-right. Can be replaced with a dot, a slash or another icon.

BreadcrumbEllipsis

Prop	Type	Default	Description
className	string	—	Renders a more-horizontal icon + an sr-only "More". Wrap it with DropdownMenu to reveal the hidden segments.

Keyboard

Key	Action
`Tab`	Moves focus through each BreadcrumbLink in order.
`Enter`	Follows the focused link.

Accessibility

The root <nav> has aria-label="breadcrumb", announced by assistive technologies as "breadcrumb navigation". When a page shows more than one breadcrumb, give each a distinct name with ariaLabel so the landmarks can be told apart (the demos on this page do). The list is an ordered <ol> (order = hierarchy). The current segment has aria-current="page". Separators have aria-hidden="true" so assistive technologies do not read them.

Examples

Basic

tsx

1
2
3
4
5
6
7
8
9<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="#">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="#">Components</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom separator

tsx

1
2
3
4
5import { DotIcon } from "lucide-react"

<BreadcrumbSeparator>
  <DotIcon />
</BreadcrumbSeparator>

Slash separator

tsx

<BreadcrumbSeparator>/</BreadcrumbSeparator>

Collapsed (ellipsis)

tsx

1
2
3<BreadcrumbItem>
  <BreadcrumbEllipsis />
</BreadcrumbItem>

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      Components
      <ChevronDownIcon className="h-3.5 w-3.5" />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Documentation</DropdownMenuItem>
      <DropdownMenuItem>Themes</DropdownMenuItem>
      <DropdownMenuItem>GitHub</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

RTL (Arabic)

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13<div dir="rtl">
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">الرئيسية</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator><DotIcon /></BreadcrumbSeparator>
      <BreadcrumbItem>
        <BreadcrumbPage>مسار التنقل</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</div>

Try it live Open in play

Edit this example live in the bext playground. It compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A breadcrumb shows the path to the current page. Each crumb is a
// link, separated by a chevron, with the last one marked current.
const CRUMBS = ["Home", "Components", "Breadcrumb"];

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Breadcrumb</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>The path to the current resource in a hierarchy.</p>
      <nav style={{ marginTop: 22, display: "flex", alignItems: "center", gap: 8, fontSize: 14, flexWrap: "wrap" }}>
        {CRUMBS.map((c, i) => {
          const last = i === CRUMBS.length - 1;
          return (
            <span key={c} style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              {last ? (
                <span style={{ color: "#0a0a0a", fontWeight: 600 }}>{c}</span>

The React idiom: same UI, for comparison.

← Badge Button →

On This Page

Breadcrumb

Installation

Usage

Anatomy

API Reference

Breadcrumb

BreadcrumbList

BreadcrumbItem

BreadcrumbLink

BreadcrumbPage

BreadcrumbSeparator

BreadcrumbEllipsis

Keyboard

Accessibility

Examples

Basic

Custom separator

Slash separator

Collapsed (ellipsis)

Dropdown (composed)

RTL (Arabic)