Breadcrumb

Hierarchical location indicator that shows the path from the root to the current page. Supports collapsing, home icons, and custom separators.

Preview

Variants

Three display modes cover the full range of navigation depth scenarios.

Variant	When to use
Full	Depth ≤ 4 levels. All crumbs visible at once.
Collapsed	Depth ≥ 5 levels. Middle crumbs collapse to '…'; expand on click.
Home icon	Root-level crumb is always '/' — replace the label with a House icon to save space.

Implementation

Breadcrumb.tsx

tsx

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

// Basic usage
<Breadcrumb
  items={[
    { label: "Settings", href: "/settings" },
    { label: "Billing",  href: "/settings/billing" },
    { label: "Payment Methods" },
  ]}
/>

// With home icon
<Breadcrumb
  homeIcon
  items={[
    { label: "Home",    href: "/" },
    { label: "Library", href: "/library" },
    { label: "Albums" },
  ]}
/>

// Collapsed — shows root + … + current
<Breadcrumb
  maxVisible={3}
  items={[
    { label: "Home",        href: "/" },
    { label: "Projects",    href: "/projects" },
    { label: "Web App",     href: "/projects/web-app" },
    { label: "Components",  href: "/projects/web-app/components" },
    { label: "Breadcrumb" },
  ]}
/>

Props

Prop	Type	Default	Description
`items`	`Array<{ label: string; href?: string }>`	—	Ordered list of crumbs from root to current. The last item is rendered as the current page (no link).
`maxVisible`	`number`	`undefined`	When set, collapses middle items into a '…' button that expands on click. Always shows the first and last crumb.
`separator`	`ReactNode`	`"›"`	Custom separator element rendered between each crumb.
`homeIcon`	`boolean`	`false`	Replaces the first crumb label with a Home icon.
`size`	`"sm" \| "md"`	`"md"`	Controls font size and separator spacing.

Accessibility

→Wrap in <nav aria-label="Breadcrumb"> and use an <ol> so screen readers announce the list count.
→The current page crumb must have aria-current="page" and must NOT be a link.
→Separator characters (›, /) must have aria-hidden="true" so screen readers skip them.
→The collapsed '…' button must expand inline and announce the new items to assistive technology via aria-live.
→Minimum tap target for each crumb link is 44×44px on touch — add padding rather than increasing font size.