Next.js Breadcrumb — Server-Rendered Route Trails

Drivn installs through a CLI that writes component source into your repository — no runtime package, no version to track. From the root of your Next.js 16 project run npx drivn add breadcrumb. The CLI prompts once for an install directory, defaulting to src/components/ui/, then writes breadcrumb.tsx into place. The component imports two icons from lucide-react — ChevronRight for the default separator and MoreHorizontal for the ellipsis — so make sure that package is in your project; everything else is React, Tailwind, and the local cn class-merge helper. The CLI reference documents custom paths and multi-component installs, and the installation guide covers project prerequisites. Once the file lands it is yours — future Drivn releases never overwrite it.

App Router pages are server components by default, and the Breadcrumb renders inside one without any directive: the file has no 'use client', no state, and no effect, so Next.js ships the trail as static HTML with zero JavaScript attached. Compose it from sub-components — Breadcrumb.Item for each link and Breadcrumb.Page for the current page. You never insert separators yourself: the root maps over React.Children.toArray(children) and prepends a Breadcrumb.Separator before every child after the first, skipping children that already are separators. The rendered markup is the canonical accessible structure — <nav aria-label="Breadcrumb"> around an <ol>, the current page marked aria-current="page", and each separator wrapped in role="presentation" with aria-hidden="true" so screen readers announce the trail, not the chevrons.

Hand-written breadcrumbs drift the moment a route is renamed. In the App Router the URL segments are already available to every dynamic page, so the trail can be derived instead of maintained. Await params in a server component, map every segment except the last to a Breadcrumb.Item whose href is the cumulative path, and render the final segment as Breadcrumb.Page. Because React.Children.toArray flattens mapped arrays, the automatic separator insertion works exactly as it does with hand-written children — every mapped item gets its chevron with no extra markup. Format the raw segment however your routes demand (replace dashes, capitalize words); the Breadcrumb examples page shows a formatting helper in a finished layout.

The default separator is a ChevronRight icon, sized by the [&>svg]:size-3.5 rule in the component's separator styles and dimmed to 60% muted-foreground. To use a different glyph, pass separator to the root — a slash, a dot, an arrow, any React node — and the auto-insertion renders it between every pair of items. For deep hierarchies, Breadcrumb.Ellipsis collapses the middle of the trail: it renders a MoreHorizontal icon with screen-reader-only text reading "More pages", so the markup stays accessible while the visible trail stays short. Keep the first and last items visible either way — users orient on where a path starts and ends, and the Breadcrumb docs list every sub-component this pattern composes from.

Breadcrumb.Item renders a plain anchor — the source spreads its props onto an <a> element — which in Next.js triggers a full document navigation on click. For breadcrumbs that is often acceptable, but if you want the same prefetching and soft transitions as the rest of your app, the copy-and-own model makes the upgrade a one-line edit: import Link from next/link inside breadcrumb.tsx and swap the <a> for it. Nothing else changes — Link accepts the same href, className, and anchor attributes the component already passes through, and the React.AnchorHTMLAttributes prop type keeps every call site type-checked. Because the file lives in your repo, the edit is permanent; no library release can revert it.