Breadcrumb

Hierarchical navigation trail.

stable

Preview

Code

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
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Sub-components

BreadcrumbList— `<ol>` for the items.

BreadcrumbItem— Each step.

BreadcrumbLink— Clickable previous step.

BreadcrumbPage— Current page — marked `aria-current="page"`, non-clickable.

BreadcrumbSeparator— Chevron divider between items.

Root renders `<nav aria-label="Breadcrumb">`.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/breadcrumb.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { ChevronRight } from "lucide-react";
import { type ComponentProps, forwardRef } from "react";

export const Breadcrumb = forwardRef<HTMLElement, ComponentProps<"nav">>(
  ({ className, ...props }, ref) => (
    <nav ref={ref} aria-label="Breadcrumb" className={cn("text-sm", className)} {...props} />
  ),
);
Breadcrumb.displayName = "Breadcrumb";

export const BreadcrumbList = forwardRef<HTMLOListElement, ComponentProps<"ol">>(
  ({ className, ...props }, ref) => (
    <ol
      ref={ref}
      className={cn("flex flex-wrap items-center gap-1.5 text-fg-muted", className)}
      {...props}
    />
  ),
);
BreadcrumbList.displayName = "BreadcrumbList";

export const BreadcrumbItem = forwardRef<HTMLLIElement, ComponentProps<"li">>(
  ({ className, ...props }, ref) => (
    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
  ),
);
BreadcrumbItem.displayName = "BreadcrumbItem";

export const BreadcrumbLink = forwardRef<HTMLAnchorElement, ComponentProps<"a">>(
  ({ className, ...props }, ref) => (
    <a ref={ref} className={cn("transition-colors hover:text-fg", className)} {...props} />
  ),
);
BreadcrumbLink.displayName = "BreadcrumbLink";

export const BreadcrumbPage = forwardRef<HTMLSpanElement, ComponentProps<"span">>(
  ({ className, ...props }, ref) => (
    <span
      ref={ref}
      aria-current="page"
      className={cn("font-medium text-fg", className)}
      {...props}
    />
  ),
);
BreadcrumbPage.displayName = "BreadcrumbPage";

export function BreadcrumbSeparator({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      role="presentation"
      aria-hidden="true"
      className={cn("text-fg-subtle", className)}
      {...props}
    >
      <ChevronRight className="h-3.5 w-3.5" />
    </span>
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmBreadcrumb (extends HBox). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmBreadcrumb;

PrizmBreadcrumb()

Prop	Type	Default	Description
addCrumb	`(String) → Hyperlink`	—	Add a clickable ancestor crumb (wire setOnAction).
addCurrent	`(String) → Label`	—	Add the non-link current page (the tail).

Composite HBox of muted crumb links separated by chevrons, ending in the current page. Mirrors components/ui/breadcrumb.tsx.