Breadcrumb

Installation

Install the dependencies:

npm install @base-ui/react

Copy the source into components/ui/breadcrumb.tsx. Registry items that depend on it install it automatically.

components/ui/breadcrumb.tsx

Usage

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

export function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/design">Design</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Examples

Collapsed

BreadcrumbEllipsis stands in for levels that do not need to be spelled out.

API Reference

Parts

Part	Description
`Breadcrumb`	The `nav` landmark.
`BreadcrumbList`	The ordered list of levels.
`BreadcrumbItem`	One level.
`BreadcrumbLink`	A navigable level; compose with `render` for router links.
`BreadcrumbPage`	The current page, not a link.
`BreadcrumbSeparator`	The divider glyph between levels.
`BreadcrumbEllipsis`	Placeholder for collapsed levels.