Breadcrumb

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

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/breadcrumb.json

Usage

Use breadcrumbs to show navigation context within nested pages.

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

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

Compose BreadcrumbEllipsis for collapsed middle segments. Pass a custom child to BreadcrumbSeparator for an alternate divider, or use render on BreadcrumbLink for router links.