Shadcn Breadcrumb

Browse 15 production-ready shadcn breadcrumb components for navigation trails, app hierarchy, and wayfinding. Breadcrumb is compatible with Radix UI and Base UI stacks and fully aligned with Shadcn Create styling.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Location trails on docs, store and admin pages that link back up to each parent level
Workspace, team and file paths whose levels carry avatars, icons, count badges or button styling
Deep hierarchies whose middle levels collapse into an ellipsis or a dropdown menu

When not to use

A whole top header that pairs the trail with tabs, search, switchers and account menus: use the Navbar blocks
A full product layout of side navigation, header and content around the trail: use the App Shell blocks
A divider line between page sections or groups of toolbar controls: use the Separator component

Agent notes

BreadcrumbLink takes a router link through render on the base twin and asChild on the radix twin
Every level is hard coded and each href is a hash placeholder; build the BreadcrumbItem list from your route tree

Markdownhttps://reui.io/components/breadcrumb.md

MCPget_component("breadcrumb")

Installnpx shadcn@latest add breadcrumb

Full index for agents:llms.txtReUI MCP setup

Shadcn Breadcrumb: Navigation Trails & Hierarchy

Shadcn Breadcrumb shows the user's path through an app or documentation hierarchy, with clickable links to parent pages. It follows Radix UI composition conventions and Base UI-style semantic markup, with full compatibility for Shadcn Create styling.

It renders as a horizontal list separated by visual markers (/, >, →) with the current page (non-clickable) at the end, helping users understand where they are and backtrack to parent pages.

ReUI lists breadcrumb components inside e-commerce product pages, documentation hierarchies, and admin dashboards so you evaluate separators, responsive truncation, and mobile stacking. The sections below explain what the component is, why it matters, key features, and integration ideas.

What is Shadcn Breadcrumb?

A breadcrumb is a visual navigation trail showing the user's path within a hierarchy: Home / Products / Electronics / Phones. Shadcn Breadcrumb composes BreadcrumbList, BreadcrumbItem, BreadcrumbLink, and BreadcrumbPage so you can render custom separators, icons, and truncation.

Components here show simple breadcrumbs (Home / Page), nested hierarchies (Home / Parent / Current), responsive breadcrumbs with ellipsis on mobile, and icon-based separators. They help you choose a separator style and decide how to handle long paths on small screens.

Why Use Shadcn Breadcrumb?

Breadcrumbs reduce cognitive load by showing users where they are without needing a full navigation menu. They're essential in e-commerce (Home / Category / Subcategory / Product), docs (Home / Guide / Topic / Article), and admin tools (Home / Module / Section / Record).

The hierarchies on this page show how breadcrumbs work with Shadcn Button back actions, links, and Next.js routing.

Shadcn Breadcrumb Features

Semantic HTML. Uses nav with aria-label and ol list markup so screen readers announce the breadcrumb as navigation.
Custom Separators. Change the separator from / to >, →, |, or custom icons. Define the separator once and apply across all items.
Responsive Truncation. Show a BreadcrumbEllipsis (...) when paths are long on mobile, collapsing intermediate pages and revealing them on click.
Link and Page Elements. BreadcrumbLink is clickable; BreadcrumbPage is the current page (non-interactive), styled differently to show position.
Icon Support. Add Lucide icons before the first item or next to separators for visual enhancement, especially in docs or admin contexts.

Place breadcrumbs at the top of a page, above the Shadcn Card or main heading. Pair with a Shadcn Button with an icon for a Back action as an alternative.

Combine breadcrumbs with Shadcn Navigation Menu to provide both hierarchical and flat navigation options. Use breadcrumbs in Shadcn Dialog or Shadcn Sheet on mobile to preserve space.

Add breadcrumbs to Shadcn Table headers to show context for filtered data. In admin tools, pair breadcrumbs with Shadcn Pagination to show the full path while navigating results.

Navbar Blocks in ReUI Pro

The free examples above pair with 13 production ready navbar blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Navbar (13 blocks)Top navigation bars with responsive menus, search, and user actions for web applications.

Browse all Application blocks

Frequently Asked Questions

When should I use a breadcrumb in my app?

Use breadcrumbs in hierarchical structures: e-commerce (category > product), docs (topic > article), admin tools (module > record). Avoid breadcrumbs in flat navigation like a blog.

What separator character should I use?

/ is standard and widely recognized. > is modern and directional. / suits e-commerce; > suits docs. Choose one and keep it consistent.

How do I handle long breadcrumb paths on mobile?

Use BreadcrumbEllipsis to collapse intermediate items. Show Home > ... > Current on small screens, and expand to the full path on click or hover.

Should every item in a breadcrumb be clickable?

All but the last (current page) should be clickable links. The current page is non-interactive to show users where they are.

Do breadcrumbs improve SEO?

Semantic breadcrumb markup (nav, ol, link elements) helps search engines understand site structure. Include schema.org BreadcrumbList JSON-LD for rich snippets.

Can I add icons to breadcrumbs?

Yes. Add small icons (home icon before Home, category icons) to enhance meaning, but avoid visual clutter. Icons should reinforce, not replace, text.

How are ReUI breadcrumb components different from a code snippet?

They show breadcrumbs in real product pages, docs, and admin tools so you evaluate separators, responsive behavior, and how they integrate with page headers and navigation menus.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.