How to Add a Breadcrumb to a React App

Three things need to be true before the install. Tailwind CSS v4 must be processing your styles — every visual decision in the component is a utility class, from the flex items-center gap-1.5 list layout to the muted separator color. TypeScript must be configured, because the file ships as .tsx and types its sub-components against React.AnchorHTMLAttributes; Drivn treats TypeScript as part of the stack, never an option. And the @/ import alias must resolve to your source directory, since the component imports cn from @/utils/cn. Unlike some Drivn components, the Breadcrumb also needs lucide-react installed — it pulls ChevronRight for the default separator and MoreHorizontal for the ellipsis. The installation page covers the minimal setup for hand-rolled projects.

Run the CLI from your project root. It prompts once for the components directory — src/components/ui/ by default — and writes breadcrumb.tsx there. Nothing is added to package.json beyond what you already have; the component is roughly eighty lines of React you can read in one sitting, with every class collected in a styles object at the top of the file. The CLI docs list flags for custom paths and for installing several components in one command. Commit the pristine file before you customize it so later edits diff cleanly against the original — the file is yours from this point on, and Drivn releases never rewrite it.

Import the root and compose the trail from Breadcrumb.Item for every clickable ancestor and a single Breadcrumb.Page for where the user currently is. Notice what you do not write: separators. The root walks its children with React.Children.toArray(children).flatMap() and inserts a Breadcrumb.Separator before every child after the first, skipping any separator you placed yourself. The rendered HTML is the structure assistive tech expects — a <nav aria-label="Breadcrumb"> wrapping an <ol>, each link inside an <li>, and the current page marked aria-current="page" and rendered as a non-interactive <span>. Hover styling comes from hover:text-foreground on the link class, and the whole list wraps gracefully on narrow screens via flex-wrap. The Breadcrumb docs cover the full sub-component list and props.

The default separator is a ChevronRight, dimmed via text-muted-foreground/60 and sized by the [&>svg]:size-3.5 rule in the component's styles. To change it everywhere at once, pass any React node to the root's separator prop — a slash for file-path hierarchies, a dot for compact layouts, an icon from another set. Every auto-inserted separator uses the node you pass, so one prop keeps the whole trail consistent. For hierarchies that run deep, Breadcrumb.Ellipsis collapses the middle: it renders a MoreHorizontal icon with a visually hidden "More pages" label, so screen readers still announce that intermediate levels exist. Keep the root and the current page visible on both sides of the ellipsis — users orient on the ends of a trail, not its middle.

Static trails suit fixed pages, but most React apps want the breadcrumb computed from the current URL. With react-router, read pathname from useLocation, split it on /, and map the segments: each prefix becomes a Breadcrumb.Item with an accumulated href, and the final segment renders as Breadcrumb.Page. A small labels record turns URL slugs into readable titles. Because the auto-injection flattens mapped arrays before inserting separators, the dynamic version needs no special handling. One more copy-and-own note: Breadcrumb.Item renders a plain <a>, which triggers a full reload on click. For client-side transitions, open breadcrumb.tsx and swap the anchor for your router's <Link> — one edit, every call site upgraded. The examples page shows the Next.js flavor of this same pattern.