Breadcrumb

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/breadcrumb

UsageCopy Anchor Link

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Settings</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>;

BreadcrumbLink renders an <a>. To use your router's link, pass it to render, like render={<Link href="/" />}.

Custom separatorCopy Anchor Link

Pass children to BreadcrumbSeparator to replace the chevron.

CollapsedCopy Anchor Link

Use BreadcrumbEllipsis for hidden levels. Put it in a Menu trigger so users can still reach them. The ellipsis is hidden from screen readers, so give the trigger an aria-label.

AccessibilityCopy Anchor Link

Breadcrumb is a <nav> labeled "breadcrumb". BreadcrumbPage sets aria-current="page" on the current page. Separators are hidden from screen readers.

API referenceCopy Anchor Link

This is a custom component, not a Base UI wrapper. Each part accepts every native attribute of the element it renders: <nav>, <ol>, <li>, <a>, or <span>.

BreadcrumbLinkCopy Anchor Link

BreadcrumbSeparatorCopy Anchor Link