Breadcrumb

A composable breadcrumb component for building accessible navigation trails. Uses semantic HTML (<nav>, <ol>) and ARIA attributes out of the box. The separator defaults to a chevron icon and can be customized.

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

export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Anatomy

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

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

With Next.js Link

Use the render prop on BreadcrumbLink to render as a Next.js Link for client-side navigation.

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink render={<Link href="/docs" />}>Docs</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Button</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom separator

Pass children to BreadcrumbSeparator to replace the default chevron icon.

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

Use BreadcrumbEllipsis to indicate truncated items in long breadcrumb trails.

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

API Reference

The root <nav> wrapper. Provides an aria-label="breadcrumb" for accessibility.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

BreadcrumbList

An <ol> element that lays out breadcrumb items in a horizontal, wrapping flex row.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

BreadcrumbItem

An <li> element that wraps a single breadcrumb entry.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

BreadcrumbLink

A clickable breadcrumb entry. Renders as an <a> by default.

Prop	Type	Default	Description
`render`	`ReactElement`	—	Render as a different element, such as a Next.js `Link`.
`href`	`string`	—	The URL to navigate to.
`className`	`string`	—
`children`	`ReactNode`	—

BreadcrumbPage

A <span> representing the current page. Marked with aria-current="page" and visually distinct from links.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

BreadcrumbSeparator

A presentational <li> that renders a ChevronRightIcon by default. Pass children to customize.

Prop	Type	Default	Description
`children`	`ReactNode`	`<ChevronRightIcon />`	Custom separator content.
`className`	`string`	—

BreadcrumbEllipsis

A presentational <span> that renders an ellipsis icon, used to indicate truncated breadcrumb items.

Prop	Type	Default
`className`	`string`	—

Breadcrumb

Anatomy

Examples

Basic breadcrumb

With Next.js Link

Custom separator

Collapsed breadcrumb

API Reference

Breadcrumb

BreadcrumbList

BreadcrumbItem

BreadcrumbLink

BreadcrumbPage

BreadcrumbSeparator

BreadcrumbEllipsis