React Breadcrumb Examples — Separators, Links, Ellipsis

The default breadcrumb uses a ChevronRight icon between every item and renders the final segment as a non-interactive <Breadcrumb.Page>. You write only the items and the current page — separators are injected automatically between siblings at render time, so a three-level breadcrumb has three JSX children, not five.

The root applies flex items-center gap-1.5 flex-wrap text-sm text-muted-foreground so the trail wraps gracefully on narrow viewports. Each Breadcrumb.Item becomes a muted link that darkens on hover via hover:text-foreground; the current page gets font-medium text-foreground so it reads as the anchor of the trail. Use this pattern anywhere you have a clean, fixed-depth hierarchy — docs pages, admin sections, or content categories.

Passing a separator prop to the root swaps the chevron for any JSX node — a slash character, a dot, a vertical bar, or an icon from a different set. The auto-injector uses whatever you pass once, so every position in the trail stays visually consistent without repeating the separator at each item.

Slashes suit file-path-style breadcrumbs where the trail represents a literal hierarchy: user settings, file tree navigation, storage keys. Dots work well for compact mobile layouts. For a branded look, pass a styled <span> that references design tokens so the separator picks up your theme's muted color automatically. The separator prop is typed as React.ReactNode, so there is no escape hatch needed for custom markup — any valid JSX works and inherits your Tailwind classes.

Breadcrumb.Item renders as a plain <a> tag by default, which triggers a full page reload when clicked. In a Next.js app you want client-side routing on nav links, which means rendering each item as a <Link> instead of a raw anchor. Because the Breadcrumb lives in your codebase after install, the clean fix is to edit src/components/ui/breadcrumb.tsx once: swap the <a> inside the Item function for a <Link> from next/link, passing href and spreading the remaining props.

This is the "copy and own" pattern Drivn is built around — the component is yours the moment you run drivn add breadcrumb via the CLI. No asChild prop, no Slot wrapper, no runtime indirection. Update the file once and every breadcrumb across your app gets client-side routing without touching a single call site.

Deep hierarchies — a file eight folders down, a product in a nested category — produce breadcrumbs that wrap across two lines or overflow a narrow card. The Breadcrumb.Ellipsis pattern collapses the middle of the trail into a single glyph, keeping the root and the current page visible while signalling that intermediate levels exist.

Drivn's Ellipsis renders a MoreHorizontal icon inside a 36-pixel square with an sr-only "More pages" label so screen readers still announce it. Place it between the root item and the next visible item in the trail, and the automatic separator injection puts chevrons on either side. The ellipsis itself is a <li> with no interaction by default; if you want it to open a dropdown of the hidden levels, wrap it in a Popover or your own disclosure component at the call site.

Static breadcrumbs work for fixed-depth pages, but most apps compute the trail from the current URL. The pattern is a small helper that splits pathname into segments, accumulates an href for each prefix, maps the segment to a human-readable label, and renders the array as a list of Breadcrumb.Item elements with the final entry as a Breadcrumb.Page.

For a Next.js App Router app, call usePathname() inside a client component, split the path on /, and filter out empty strings. Pair it with a small label map — { docs: "Docs", components: "Components" } — so URL slugs render as proper titles in the trail. This pattern scales to any depth without manual edits: new routes show up with correctly-formatted breadcrumbs automatically, and the final segment is always the current page. Drop the component into your app shell once and every page inherits the trail.