Q: Should the current (last) crumb be a link or plain text?

Plain text — wrap it in ` ` instead of ` `. The current page already IS the page; making it a link is misleading (clicking goes nowhere). Plain text also gets the `aria-current="page"` attribute automatically, which screen readers announce as "current page" — a meaningful signal of where the user is in the hierarchy.

Question 1

What is a shadcn breadcrumb?

Accepted Answer

A shadcn breadcrumb is a navigation component that shows the user's location within a hierarchy — Home › Products › Electronics › Headphones — using a horizontal trail of links separated by chevrons or slashes. It's built on the shadcn/ui Breadcrumb primitive (semantic `<nav aria-label="breadcrumb">`, list-of-links structure, ARIA current-page support) and styled with Tailwind CSS. Each example in this gallery is a single self-contained TSX file — copy, paste, and ship.

Question 2

Are these breadcrumb examples free?

Accepted Answer

Yes. Every breadcrumb example on shadcn.io is free to copy and use in personal or commercial projects. There's no gated source, no attribution requirement, and no runtime dependency on shadcn.io. Browse any example, view the code, run the installer, and move on.

Question 3

Why does this matter for SEO?

Accepted Answer

Breadcrumbs do double duty for search rankings. Visually they help users understand site structure (lower bounce rate, more pages per session). For Google specifically, breadcrumbs are eligible for BreadcrumbList JSON-LD structured data — Google then renders the breadcrumb path under your search snippet instead of the raw URL, which improves CTR. Wrap each link in the appropriate schema.org markup OR emit the BreadcrumbList JSON-LD from your page-level `<script>` tag.

Question 4

When should I use breadcrumbs versus a sidebar or a back button?

Accepted Answer

Breadcrumbs work best for hierarchical content with depth ≥ 2 — e-commerce categories, docs sections, file managers. Use a sidebar when navigation is wide rather than deep (settings panels, peer-level pages). Use a back button when the user came from one specific page and you want to send them back, regardless of hierarchy. The three patterns can coexist: breadcrumbs for hierarchy, sidebar for sections, back button for flow.

Question 5

Should I use a chevron, slash, or arrow as the separator?

Accepted Answer

Chevron (›) is the modern default — it reads as "forward into" which matches the navigation intent. Slash (/) is more compact and works well in dense breadcrumbs (e.g. file paths). Arrow (→) is rarer and best when you want to emphasize the directional flow. Pick one and stick with it across your app — mixing separators between routes feels inconsistent.

Question 6

When should I add a home icon to the first crumb?

Accepted Answer

Use the home-icon variant when the first crumb is the literal homepage (`/`) — the icon reinforces the meaning faster than the word "Home". Skip it when the first crumb is a section root ("Docs", "Settings") rather than the site root. Pair the icon with `aria-label="Home"` so screen-reader users still hear the destination, since visual icons need text alternatives.

Question 7

How do I handle long breadcrumb chains that overflow?

Accepted Answer

Truncate the middle with an ellipsis: show the first crumb, the last 1–2 crumbs, and replace the rest with `…` that opens a dropdown menu listing the hidden parents. The shadcn Breadcrumb primitive ships a `BreadcrumbEllipsis` component that pairs with DropdownMenu naturally. For mobile, consider hiding all middle crumbs by default and showing only the parent + current page; tap the parent to drill back.

Question 8

Should the current (last) crumb be a link or plain text?

Accepted Answer

Plain text — wrap it in `` instead of ``. The current page already IS the page; making it a link is misleading (clicking goes nowhere). Plain text also gets the `aria-current="page"` attribute automatically, which screen readers announce as "current page" — a meaningful signal of where the user is in the hierarchy.

Question 9

How do I install a breadcrumb example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading on any example's detail page. The shadcn CLI copies the example's TSX source into your project at `components/examples/breadcrumb/…`, plus the shadcn/ui Breadcrumb primitive if you don't already have it. Replace the sample crumb labels with your own route data.

Question 10

How do I generate breadcrumbs from my Next.js routes automatically?

Accepted Answer

Use `usePathname()` (App Router) to get the current path, split on `/`, and map each segment to a crumb object. Lookup human-readable titles from a route-to-title map (or fetch them dynamically). For App Router with deeply nested layouts, you can also pass crumbs down from each layout's `page.tsx` and stitch them in a layout. Avoid hardcoding breadcrumbs per page — the duplication breaks the moment routes change.

Question 11

How do I emit BreadcrumbList JSON-LD for SEO?

Accepted Answer

Inside your page's `` or as a `

Question 12

How do I style the active versus inactive crumbs?

Accepted Answer

By default, `BreadcrumbLink` is a muted-foreground link that becomes foreground on hover. `BreadcrumbPage` (the current page) is foreground at full strength with `aria-current="page"`. You can override either via className on the wrapping component. For a stronger active state, give `BreadcrumbPage` `font-medium` or a slightly larger size — but keep it subtle, the breadcrumb is navigation chrome, not the focus of the page.

Question 13

Which libraries do breadcrumb examples depend on?

Accepted Answer

shadcn/ui Breadcrumb (the styled wrapper generated into your project by the CLI), Tailwind CSS (styling), Lucide React (chevron/slash/home icons), and optionally next/link or react-router-dom (depending on your router). TypeScript is assumed. React 19 is the baseline. No state library — breadcrumbs are pure render. Some examples add DropdownMenu for ellipsis truncation; that's a single shadcn primitive away.

Question 14

Are breadcrumb examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. The `` wrapper renders `

Question 15

Can I use these breadcrumb examples with React Server Components?

Accepted Answer

Yes — Breadcrumb is pure render with no client state. Compute the crumbs array on the server (from your route + DB title lookups) and pass it down. The shadcn primitive is a Server Component out of the box. Only client boundary you'd need is for ellipsis dropdowns on truncation, but even those can stay server-rendered and let the dropdown open client-side.

Question 16

Do these examples work with Tailwind CSS v3 and v4?

Accepted Answer

Both. shadcn.io is authored on Tailwind v4, so the examples use the v4 class names and design tokens. If you're on Tailwind v3, the classes still apply — Tailwind v4 introduced opt-in features but kept the utility naming compatible. The hover states and chevron animations work identically across versions.

Browse every breadcrumb example

Grab your MCP URL

Paste into your editor

Prompt as usual

Pick any block

Own the code

Ship today

Pagination

Tabs

Navigation Menu

Menubar

Separator

Command

Tooltip

Dropdown Menu

React Breadcrumb Examples for shadcn/ui