Components

Breadcrumb

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

Playground

Separator—children

Depth—children

Collapsed—BreadcrumbEllipsis

Ellipsis menu—DropdownMenu

Usage

Compose the trail inside a BreadcrumbList: each BreadcrumbItem holds a BreadcrumbLink, with a BreadcrumbSeparator between items. The last item is a BreadcrumbPage — a non-interactive span marked aria-current="page" that represents where the user is now.

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

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

Custom separator

The default separator is a caret icon that flips automatically in RTL. Pass children to BreadcrumbSeparator to replace it — plain text or any icon; svgs are sized to 14px by the separator itself.

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

Dropdown

A BreadcrumbItem can host a DropdownMenu to expose sibling routes at that level of the hierarchy — use the trigger where a link would go and align the content to the start.

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@workspace/ui/components/dropdown-menu"
import { CaretDownIcon } from "@phosphor-icons/react"

<BreadcrumbItem>
  <DropdownMenu>
    <DropdownMenuTrigger className="flex items-center gap-1">
      Components
      <CaretDownIcon />
    </DropdownMenuTrigger>
    <DropdownMenuContent align="start">
      <DropdownMenuItem>Documentation</DropdownMenuItem>
      <DropdownMenuItem>Themes</DropdownMenuItem>
      <DropdownMenuItem>GitHub</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</BreadcrumbItem>

Collapsed

When the trail gets long, replace the middle items with a BreadcrumbEllipsis inside its own BreadcrumbItem. Keep the first and last links visible so the user still sees where the path starts and ends — or wrap the ellipsis in a DropdownMenu to make the hidden levels reachable (try it in the playground).

import { BreadcrumbEllipsis } from "@workspace/ui/components/breadcrumb"

<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>

Link component

BreadcrumbLink renders a plain anchor by default. Pass asChild to delegate rendering to your routing library's link — the breadcrumb styles land on the child element, so client-side navigation keeps working.

import Link from "next/link"

<BreadcrumbItem>
  <BreadcrumbLink asChild>
    <Link href="/components">Components</Link>
  </BreadcrumbLink>
</BreadcrumbItem>

RTL

Breadcrumb is plain HTML — unlike the Radix-based components it needs no dir prop; a dir="rtl" ancestor is enough. The default caret separator flips to point along the reading direction via rtl:rotate-180.

<div dir="rtl">
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="/">الرئيسية</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="/components">المكونات</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>شريط التنقل</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</div>

Accessibility

The root renders a <nav aria-label="breadcrumb"> landmark around an ordered list, so screen readers announce both the region and the number of levels. BreadcrumbPage carries aria-current="page" to mark the current location, separators are decorative (aria-hidden + role="presentation") and the ellipsis includes a visually hidden "More" label.

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li role="presentation" aria-hidden="true">›</li>
    <li>
      <span role="link" aria-disabled="true" aria-current="page">
        Breadcrumb
      </span>
    </li>
  </ol>
</nav>

API Reference

Every part is a thin wrapper over its native element and accepts all of that element's props. There is no state and no context — the trail is exactly the markup you compose.

Component	Prop	Default
Breadcrumb	...props: ComponentProps<"nav">	—
BreadcrumbList	...props: ComponentProps<"ol">	—
BreadcrumbItem	...props: ComponentProps<"li">	—
BreadcrumbLink	asChild?: boolean	false
BreadcrumbLink	href?: string	—
BreadcrumbPage	...props: ComponentProps<"span">	—
BreadcrumbSeparator	children?: ReactNode	caret icon
BreadcrumbEllipsis	...props: ComponentProps<"span">	—

<Breadcrumb data-slot="breadcrumb" />                 // <nav aria-label="breadcrumb">
<BreadcrumbList data-slot="breadcrumb-list" />        // <ol>
<BreadcrumbItem data-slot="breadcrumb-item" />        // <li>
<BreadcrumbLink data-slot="breadcrumb-link" />        // <a>
<BreadcrumbPage data-slot="breadcrumb-page" />        // <span aria-current="page">
<BreadcrumbSeparator data-slot="breadcrumb-separator" />  // <li aria-hidden>
<BreadcrumbEllipsis data-slot="breadcrumb-ellipsis" />    // <span aria-hidden>

Tokens used

4 design tokens consumed by the Breadcrumb component.

--muted-foreground
Muted Foreground
text-muted-foreground
--foreground
Foreground
hover:text-foregroundtext-foreground
--text-sm
Text Small (14px)
text-sm
--spacing
Spacing unit (4px)
gap-1.5sm:gap-2.5size-5[&>svg]:size-3.5[&>svg]:size-4