Breadcrumb

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

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

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

With Ellipsis

Use BreadcrumbEllipsis to indicate collapsed intermediate items.

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

API Reference

Breadcrumb

Prop	Type	Default	Description
separator	ReactNode	—	Custom separator element
children	ReactNode	—	BreadcrumbList and its children

BreadcrumbLink

Prop	Type	Default	Description
href	string	—	The URL the breadcrumb links to
asChild	boolean	false	Render as child element instead of anchor

BreadcrumbPage

Renders the current page label. Styled with primary color and aria-current="page".

BreadcrumbSeparator

Renders a separator between breadcrumb items. Defaults to a ChevronRight icon. Pass children to customize.

BreadcrumbEllipsis

Renders a MoreHorizontal icon to indicate collapsed items.

Accessibility

The Breadcrumb component follows WAI-ARIA breadcrumb patterns:

• Uses <nav> with aria-label="breadcrumb" for landmark navigation
• Current page is marked with aria-current="page" and aria-disabled="true"
• Separators are hidden from assistive technology with aria-hidden="true"
• Uses an ordered list (<ol>) to convey hierarchy to screen readers