Shadcn Breadcrumb Components

Shadcn Breadcrumb Component

The Shadcn Breadcrumb shows where the current page sits in the site hierarchy, as a short trail of links such as Home, Components, Breadcrumb. It answers two questions at a glance: where am I, and how do I go one level up. Dashboards, documentation sites, file managers and online stores all rely on it once their structure is more than two levels deep.

Beyond the standard chevron trail, you will find a breadcrumb that folds middle levels into a dropdown menu, a home icon version, slash and dot separators and a boxed style for page headers. Under the hood the shadcn/ui breadcrumb is a nav with an ordered list, rendered by React and styled with Tailwind CSS, so it fits Radix UI and Base UI projects alike.

What is the Shadcn Breadcrumb Component?

A breadcrumb is a secondary navigation pattern. Each ancestor page is a link, separators sit between them, and the last item is the current page, rendered as plain text with aria-current="page". The shadcn/ui version splits this into small parts so you can swap the separator, collapse the middle of a long path into an ellipsis, or render links with your router's own link component.

Breadcrumbs complement the main menu rather than replace it. Use a Navigation Menu for the top level sections of a site, a breadcrumb to show the path inside those sections, and Pagination when users move between pages of the same list rather than up and down a hierarchy.

Anatomy of the Shadcn Breadcrumb

6 Shadcn Breadcrumb Variants

Each breadcrumb variant listed here is previewed live at the top of this page, together with its source code and install command.

• Basic: The standard trail of links with chevron separators and the current page at the end.
• Collapsed with dropdown: Hides the middle levels behind an ellipsis that opens a dropdown menu with the skipped pages. The trigger carries a visually hidden label for screen readers.
• Home icon: Replaces the first Home label with a house icon and keeps the text available to screen readers.
• Custom separators: Swaps the chevron for a slash or a middle dot by passing text children to the separator, combined with the home icon.
• Boxed: Wraps the list in a bordered, rounded container with a subtle shadow, suited to page headers and toolbars.

How to Install the Shadcn Breadcrumb Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a breadcrumb variant by its name:

npx shadcn@latest add @shadcnuikit/breadcrumb1

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Breadcrumb Component

Import the parts from your components/ui folder, add a link for each ancestor and finish with BreadcrumbPage. With Next.js, pass asChild to render the framework's Link for client-side navigation.

import Link from "next/link"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

export function ProductBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/">Home</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink asChild>
            <Link href="/shoes">Shoes</Link>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Trail Runner 2</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Why Use the Shadcn Breadcrumb Component

• Clear orientation: Users always see where they are and can jump back to any parent level in one click.
• Semantic by default: A labelled nav landmark, an ordered list and aria-current on the last item come built in.
• Router friendly: The link part can render your framework's link component, so navigation stays client side.
• Handles long paths: The ellipsis part collapses deep hierarchies without losing access to the hidden levels.
• No extra dependencies: It is plain markup and Tailwind classes, so it works the same in Radix UI and Base UI projects.

Common Breadcrumb Use Cases

• Admin dashboards: Show paths like Settings, Team, Permissions at the top of nested dashboard pages.
• E-commerce categories: Let shoppers move from a product back to its category or department.
• Documentation: Display the section and subsection above each docs article.
• File managers: Represent folder paths and let users jump to any parent folder.
• Multi-level content: Blogs, help centers and knowledge bases with categories and subcategories.

Customizing the Shadcn Breadcrumb

Pass any icon or character as children to BreadcrumbSeparator to change the divider, add icons inside a link, or style BreadcrumbList to turn the trail into a boxed toolbar. All colors use the muted and foreground tokens from your theme, so the breadcrumb follows your palette and dark mode. You can generate a matching palette with the free Theme Generator.

For example, this uses a slash separator and a boxed list:

<BreadcrumbList className="rounded-md border bg-background px-3 py-2">
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator>/</BreadcrumbSeparator>
  <BreadcrumbItem>
    <BreadcrumbPage>Settings</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>

Breadcrumb Accessibility and Keyboard Support

The breadcrumb follows the WAI-ARIA breadcrumb pattern: the root is a nav labelled "breadcrumb", the items are in an ordered list, and the current page has aria-current="page". Separators and the ellipsis icon are hidden from assistive technology, so screen readers read only the page names.

When you use an icon instead of text, such as a house for Home, keep a visually hidden label next to it, as the icon variants on this page do. If the ellipsis opens a menu, the dropdown trigger handles its own keyboard support.

Breadcrumb Best Practices

• Start with the home or root page and end with the current page, which should not be a link.
• Mirror the real site hierarchy, not the user's browsing history.
• Keep labels short and match them to the page titles users see after clicking.
• Collapse the middle levels into an ellipsis when the path is longer than four or five items.
• Place the breadcrumb above the page title, in the same position on every page.
• Add BreadcrumbList structured data so search engines can show the path in results.

Components Related to Breadcrumb

Shadcn Breadcrumb FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.