Base

Breadcrumb

Breadcrumb renders an accessible navigation trail with links, the current page, separators, and an ellipsis for collapsed segments.

Installation

npx shadcn add https://rck.vibeboxph.com//r/breadcrumb.json

Live preview & controls

Controls
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Components</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Anatomy

  • BreadcrumbThe root `<nav aria-label="Breadcrumb">`.
  • BreadcrumbListOrdered list of trail segments.
  • BreadcrumbLink / BreadcrumbPageLinked ancestor or current page segment.
  • BreadcrumbSeparator / BreadcrumbEllipsisVisual divider or collapsed indicator.

Props

PropTypeDefaultDescription
asChild (BreadcrumbLink)boolean—Render the child element instead of an `<a>`.
classNamestring—Merged with generated classes on any part.

Accessibility

  • Root uses `<nav aria-label="Breadcrumb">` so the trail is announced as a landmark.
  • Current page uses `aria-current="page"` on `BreadcrumbPage`.
  • Separators and ellipses are `aria-hidden` so screen readers hear only meaningful segments.

Source

registry/rck/ui/breadcrumb.tsx
import * as React from "react";
import { ChevronRight, MoreHorizontal } from "@/lib/icons";
import { Slot } from "@/registry/rck/primitives/slot";
import { cn } from "@/lib/utils";

export function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
  return (
    <nav
      aria-label="Breadcrumb"
      data-slot="breadcrumb"
      className={cn(className)}
      {...props}
    />
  );
}

export function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
  return (
    <ol
      data-slot="breadcrumb-list"
      className={cn(
        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words",
        className,
      )}
      {...props}
    />
  );
}

export function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-item"
      className={cn("inline-flex items-center gap-1.5", className)}
      {...props}
    />
  );
}

export interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<"a"> {
  asChild?: boolean;
}

export function BreadcrumbLink({ asChild, className, ...props }: BreadcrumbLinkProps) {
  const Comp = asChild ? Slot : "a";

  return (
    <Comp
      data-slot="breadcrumb-link"
      className={cn(
        "hover:text-foreground focus-ring rounded-sm transition-colors",
        className,
      )}
      {...props}
    />
  );
}

export function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-page"
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("text-foreground font-normal", className)}
      {...props}
    />
  );
}

export function BreadcrumbSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<"li">) {
  return (
    <li
      data-slot="breadcrumb-separator"
      role="presentation"
      aria-hidden="true"
      className={cn("[&>svg]:size-3.5", className)}
      {...props}
    >
      {children ?? <ChevronRight />}
    </li>
  );
}

export function BreadcrumbEllipsis({
  className,
  ...props
}: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="breadcrumb-ellipsis"
      role="presentation"
      aria-hidden="true"
      className={cn("flex size-5 items-center justify-center", className)}
      {...props}
    >
      <MoreHorizontal className="size-4" />
      <span className="sr-only">More</span>
    </span>
  );
}

Related examples

Basic trailHome → Docs → current page.
Collapsed segmentsEllipsis for skipped hierarchy levels.
Browse the full examples gallery