Breadcrumb

Installation

npx shadcn@latest add @uqudo/breadcrumb

Usage

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

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

Use BreadcrumbLink for every ancestor and BreadcrumbPage for the current page. To route through Next.js, pass asChild and nest a Link:

<BreadcrumbLink asChild>
  <Link href="/docs">Docs</Link>
</BreadcrumbLink>

Examples

Ellipsis

Collapse the middle of a long trail with BreadcrumbEllipsis. Wrap it in a dropdown if you want the hidden levels to stay reachable.

Custom separator

Pass any element as the child of BreadcrumbSeparator to replace the default chevron.

API Reference

BreadcrumbLink

Prop

Type

BreadcrumbSeparator

Prop

Type

Other parts

Each accepts className plus the props of the element it renders.

Component	Renders	Notes
`Breadcrumb`	`nav`	Labelled `aria-label="breadcrumb"`.
`BreadcrumbList`	`ol`	Wrapping flex row in muted, small text.
`BreadcrumbItem`	`li`	Inline flex wrapper for a link or page.
`BreadcrumbPage`	`span`	The current page: `aria-current="page"`, foreground colour, not interactive.
`BreadcrumbEllipsis`	`span`	Horizontal dots with a visually hidden "More" label. Hidden from screen readers.

Data attributes

Every part carries a data-slot of its kebab-case name: breadcrumb, breadcrumb-list, breadcrumb-item, breadcrumb-link, breadcrumb-page, breadcrumb-separator and breadcrumb-ellipsis.

On this page