Breadcrumb React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Breadcrumb is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import Breadcrumb from @/components/ui/breadcrumb.

import { Home } from "lucide-react"
import { Breadcrumb, type BreadcrumbEntry } from "@/components/ui/breadcrumb"
import type { NavItem } from "@/lib/navigation"

const clients: NavItem[] = [
  { label: "Northwind Tech Inc.", href: "/clients/42" },
  { label: "Summit Logistics", href: "/clients/57" },
  { label: "Anna Price Consulting", href: "/clients/63" },
]

export function InvoiceTrail() {
  const items: BreadcrumbEntry[] = [
    { label: "Home", href: "/", icon: <Home /> },
    { label: "Clients", href: "/clients" },
    { label: "Northwind Tech Inc.", href: "/clients/42", menu: clients },
    { label: "Invoices", href: "/clients/42/invoices" },
    { label: "#2026-0412" },
  ]

  return (
    <Breadcrumb
      items={items}
      labels={{
        more: "Show the hidden pages",
        back: (label) => `Up to ${label}`,
      }}
    />
  )
}

Props

• items
  BreadcrumbEntry[]

  { id?: string; label: ReactNode; href?: string; icon?: ReactNode; onSelect?: (event) => void; menu?: NavItem[]; textValue?: string }. Root first; the last entry is the current page. Middle entries without href are plain text (a button with onSelect). menu adds a sibling switcher after the label. An empty label with an icon renders an icon-only crumb named by textValue (read by screen readers, shown in a tooltip). Leave items out to hand-build the trail from the parts.

• children
  ReactNode

  A hand-built trail from the shadcn-compatible parts (BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis), rendered inside the <nav> when items is not set.

• separatordefault "chevron"
  "chevron" | "slash" | "dot" | "arrow" | ReactNode

  The glyph between crumbs: ChevronRight, “/”, “·”, ArrowRight or any node. Chevron and arrow flip in right-to-left layouts.

• sizedefault "md"
  "sm" | "md"

  Text 13 / 14px with 4 / 6px gaps. Icons stay 14px.

• maxItemWidthdefault 200
  number

  px. Longer labels truncate with an ellipsis and show the full text in a tooltip.

• collapsedefault "auto"
  "auto" | "never"

  auto: while the row does not fit, entries fold into “…” from the second one onward; the first and the current page always stay. never: the trail wraps onto more lines.

• maxItemsdefault 0
  number

  Also fold when there are more entries than this, keeping itemsBeforeCollapse at the start and itemsAfterCollapse at the end. 0 folds only when the row does not fit. Ignored when it is smaller than itemsBeforeCollapse + itemsAfterCollapse + 1.

• itemsBeforeCollapsedefault 1
  number

  Entries kept at the start when folding by maxItems.

• itemsAfterCollapsedefault 2
  number

  Entries kept at the end when folding by maxItems (the parent and the current page).

• mobileVariantdefault "back"
  "back" | "collapse" | "full"

  What phones get, switched with CSS so the server HTML is right. back: one “‹ Parent” link to the second-to-last entry (falls back to collapse when that entry has no href). collapse: first / … / current. full: the desktop trail.

• mobileBreakpointdefault "sm"
  "sm" | "md" | "always"

  Where the phone form takes over: below 640px (sm), below 768px (md), or at every width (always, for narrow side panels).

• animatedefault true
  boolean

  When the trail changes, new crumbs slide in from the side and the rest glide into place; leaving ones fade. Under reduced motion it only fades.

• responsivedefault true
  boolean

  The “…” and sibling menus open as bottom action sheets below 768px. false keeps the dropdown everywhere.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link every crumb renders through (next/link's Link). Default: the LinkProvider's, else a plain <a>.

• labels
  { navigation?: string; more?: string; back?: (label: string) => string; siblings?: (label: string) => string; cancel?: string }

  Accessible names and sheet text. Defaults: navigation "Breadcrumb", more "Show hidden pages", back l => "Back to " + l, siblings l => "Switch " + l, cancel "Cancel".

• classNames
  Partial<Record<"list" | "item" | "link" | "page" | "separator" | "ellipsis" | "back", string>>

  Extra classes for the inner parts; className styles the <nav>.

Parts

FAQ

Used in

More React navigation components