Breadcrumb

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

Preview

Installation

Usage

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>Breadcrumb</BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

API Reference

Root navigation container with aria-label="breadcrumb".

Ordered list container for breadcrumb items.

Individual breadcrumb item container.

Link element for navigable breadcrumb items. Supports the render prop to use custom link components (e.g., Next.js Link).

Separator between breadcrumb items. Defaults to a chevron icon but accepts custom children.

Ellipsis indicator for collapsed breadcrumb items.

Examples

With custom separator