Breadcrumb

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

Default

Full trail with a dropdown overflow and custom separator.

Installation

CLI

npx @sonojs/ui@latest add breadcrumb

Also needsnpm i lucide-react

Usage

breadcrumb.tsx

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/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>
  )
}

Props

Prop	Type	Default	Description
asChild	boolean	false	On BreadcrumbLink — render as the child element (e.g. Next.js Link).
children	React.ReactNode	ChevronRight	On BreadcrumbSeparator — custom separator; defaults to a directional chevron.