Breadcrumb

Hierarchical navigation pattern that shows the current page location and gives users a quick path back to parent sections.

AccessibleDark Mode

Install

$npx react-principles add breadcrumb

Live Demo

Open in Storybookopen_in_new

Code Snippet

src/ui/Breadcrumb.tsx

import { Breadcrumb } from "@/ui/Breadcrumb";

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item><Breadcrumb.Link href="/">Home</Breadcrumb.Link></Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item><Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link></Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item><Breadcrumb.Page>Button</Breadcrumb.Page></Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Copy-Paste (Single File)

Breadcrumb.tsx

import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export function Breadcrumb({ className, ...props }: HTMLAttributes<HTMLElement>) {
  return <nav aria-label="Breadcrumb" className={cn("w-full", className)} {...props} />;
}

Breadcrumb.List = function BreadcrumbList({ className, ...props }: HTMLAttributes<HTMLOListElement>) {
  return <ol className={cn("flex items-center gap-1.5 text-sm", className)} {...props} />;
}

Breadcrumb.Item = function BreadcrumbItem({ className, ...props }: HTMLAttributes<HTMLLIElement>) {
  return <li className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
}

Breadcrumb.Link = function BreadcrumbLink({ className, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>) {
  return (
    <a
      className={cn(
        "text-slate-500 transition-colors hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-200",
        className
      )}
      {...props}
    />
  );
}

Breadcrumb.Page = function BreadcrumbPage({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
  return <span className={cn("font-medium text-slate-900 dark:text-white", className)} {...props} />;
}

Breadcrumb.Separator = function BreadcrumbSeparator({ className, children = <span aria-hidden="true">/</span> }: { className?: string; children?: ReactNode }) {
  return <span className={cn("text-slate-400 dark:text-slate-500", className)}>{children}</span>;
}

Props

Prop	Type	Default	Description
`Breadcrumb`	`HTMLAttributes<HTMLElement>`	`—`	Root navigation landmark with the breadcrumb ARIA label.
`Breadcrumb.List`	`HTMLAttributes<HTMLOListElement>`	`—`	Ordered list wrapper that lays out items inline.
`Breadcrumb.Item`	`HTMLAttributes<HTMLLIElement>`	`—`	List item wrapper for each breadcrumb segment.
`Breadcrumb.Link`	`AnchorHTMLAttributes<HTMLAnchorElement>`	`—`	Interactive ancestor link for navigable segments.
`Breadcrumb.Page`	`HTMLAttributes<HTMLSpanElement>`	`—`	Current page label rendered as non-interactive text.
`Breadcrumb.Separator`	`{ className?: string; children?: ReactNode }`	`"/"`	Visual separator between breadcrumb items.

react-principles