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.

Eight folders down, or a product buried in nested categories, and the trail either wraps onto a second line or pushes past the edge of its card. Breadcrumb.Ellipsis collapses the middle instead: keep the root, keep the current page, and replace everything between them with one glyph that signals there are levels here.

The component renders an <li> holding a size-9 span — a 36-pixel square, matching the tap target of an icon button — with a MoreHorizontal icon at size-4 and an sr-only "More pages" label, so assistive tech announces the gap instead of skipping past it. Drop it anywhere in the children list and the root's auto-injection places chevrons on both sides, exactly as it does for any other item.

It is non-interactive out of the box, which is the right default — a decorative collapse should not advertise a click that does nothing. When you do want the hidden levels reachable, wrap the ellipsis in a Popover or a dropdown at the call site and list the skipped segments inside. The Breadcrumb file itself needs no change.

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.