Shadcn Breadcrumb: Navigation Trails for React and Next.js Apps
A breadcrumb shows users where they are inside a hierarchy and gives them one-click access to every level above the current page. The shadcn breadcrumb component renders this trail as clean, accessible markup styled with Tailwind CSS, which makes it a natural fit for admin dashboards, documentation, and e-commerce category pages built with React or Next.js.
Below you will find 6 breadcrumb examples ready to copy and paste, covering the default trail with separators, custom separator icons, a collapsed variant with a dropdown for long paths, and versions that integrate with routing links. Each example is written in TypeScript and works with any router.
When a breadcrumb earns its place
Breadcrumbs make sense whenever content is at least three levels deep: Settings, Team, Members, or Products, Electronics, Cameras. In an admin panel they answer the question of where am I without forcing users to scan the sidebar, and on detail pages they provide the fastest route back to the parent list.
Skip the breadcrumb on flat sites with one level of navigation. It adds visual noise there without adding orientation, and a simple back link inside the page header usually does the job better.
Design guidelines
- Reflect hierarchy, not history: The trail should mirror the site structure, not the user's click path. Browser back already covers history.
- Keep the current page inert: Render the last item as plain text with aria-current set to page, since linking to the page you are on is confusing.
- Collapse long trails: When paths grow past four or five levels, replace the middle items with an ellipsis that expands into a dropdown.
- Choose one separator: A chevron or slash both work. Pick one and use it consistently across the whole product.
- Truncate long labels: Cap item width and add an ellipsis so a long product name cannot push the trail onto two lines.
Why teams use this component
- Zero dependency weight: The breadcrumb is plain semantic markup, a nav element wrapping an ordered list, with no JavaScript runtime attached.
- Router agnostic: The asChild pattern lets each item render a Next.js Link, a React Router Link, or a plain anchor.
- Screen reader friendly: Built-in aria-label and aria-current attributes announce the trail correctly without extra configuration.
- Fully composable: Items, separators, and the ellipsis are separate parts, so dropdowns or icons slot in wherever you need them.
Pairing with other components
The collapsed variant pairs the ellipsis item with a dropdown menu so hidden levels stay reachable. In page headers, breadcrumbs usually sit above a title row with a button group for actions, and next to tabs when the page has sub-views.
For list-to-detail flows, combine the breadcrumb with pagination on the parent list and a data table for the records themselves. Our Next.js dashboards use exactly this header composition on every detail screen.
No primitive required
Unlike most shadcn/ui components, the breadcrumb has no Radix primitive underneath. It is plain accessible HTML styled with Tailwind CSS, which means it works identically in Radix UI based and Base UI based projects and never conflicts with either. The shadcn breadcrumb docs list the full part anatomy, from BreadcrumbList down to BreadcrumbSeparator.