Shadcn Breadcrumb

React breadcrumb component for navigating complex hierarchies with dropdown support. Built with TypeScript and Tailwind CSS for Next.js applications.

Breadcrumb links not working?

Join our Discord community for help from other developers.

Ever clicked three levels deep into a docs site and forgotten how you got there? Or watched users get lost in your e-commerce categories? Yeah, that's what happens without breadcrumbs. This shadcn/ui component keeps users oriented, no matter how deep they go.

Complete navigation with collapsed sections in a dropdown:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Built on Radix UI's Slot primitive for framework flexibility and TypeScript autocompletion. Styled with Tailwind CSS so it actually matches your design system.

npx shadcn@latest add breadcrumb

Why breadcrumbs actually build confidence

Here's the thing—breadcrumbs aren't just about navigation. They're about confidence. When users can see exactly where they are and how they got there, they're more likely to explore deeper into your site. No breadcrumbs? Users stick to the homepage like scared tourists.

Think about Amazon's category breadcrumbs. You're five levels deep looking at wireless earbuds, but you can jump back to "Electronics" with one click. That's not just convenience—it's permission to explore without fear of getting lost.

This free shadcn breadcrumb handles the complex parts—collapsing long paths, dropdown menus, framework routing—while you focus on your information architecture. Whether you're building docs sites, e-commerce stores, or complex dashboards in your JavaScript apps, breadcrumbs that actually work make users feel safe.

The classic Home → Category → Page pattern:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Custom separator

Replace chevrons with slashes, dots, or any separator:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Long paths with ellipsis in the middle:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Visual context with home icons and folder indicators:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { ChevronRight, MoreHorizontal } from "lucide-react"import { cn } from "@/lib/utils"function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />}function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {  return (    <ol      data-slot="breadcrumb-list"      className={cn(        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",        className      )}      {...props}    />  )}function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-item"      className={cn("inline-flex items-center gap-1.5", className)}      {...props}    />  )}function BreadcrumbLink({  asChild,  className,  ...props}: React.ComponentProps<"a"> & {  asChild?: boolean}) {  const Comp = asChild ? Slot : "a"  return (    <Comp      data-slot="breadcrumb-link"      className={cn("hover:text-foreground transition-colors", className)}      {...props}    />  )}function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-page"      role="link"      aria-disabled="true"      aria-current="page"      className={cn("text-foreground font-normal", className)}      {...props}    />  )}function BreadcrumbSeparator({  children,  className,  ...props}: React.ComponentProps<"li">) {  return (    <li      data-slot="breadcrumb-separator"      role="presentation"      aria-hidden="true"      className={cn("[&>svg]:size-3.5", className)}      {...props}    >      {children ?? <ChevronRight />}    </li>  )}function BreadcrumbEllipsis({  className,  ...props}: React.ComponentProps<"span">) {  return (    <span      data-slot="breadcrumb-ellipsis"      role="presentation"      aria-hidden="true"      className={cn("flex size-9 items-center justify-center", className)}      {...props}    >      <MoreHorizontal className="size-4" />      <span className="sr-only">More</span>    </span>  )}export {  Breadcrumb,  BreadcrumbList,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbPage,  BreadcrumbSeparator,  BreadcrumbEllipsis,}

Features

This free open source breadcrumb component includes everything you need:

TypeScript-first - Full type safety with autocompletion for all props
Framework flexible - Works with Next.js Link, Remix, React Router via asChild
Tailwind CSS powered - Style with utilities, not fighting CSS modules
Radix UI Slot - Compose with any link component seamlessly
Semantic HTML - Proper nav, ol, li structure for SEO and accessibility
ARIA compliant - Screen readers understand the navigation hierarchy
Dropdown support - Handle complex navigation with collapsible sections

API Reference

Core Components

Component	Purpose	Key Props
`Breadcrumb`	Root nav container	`className`
`BreadcrumbList`	Ordered list wrapper	`className`
`BreadcrumbItem`	Individual item	`className`
`BreadcrumbLink`	Clickable navigation	`href`, `asChild`
`BreadcrumbPage`	Current page (non-clickable)	`className`
`BreadcrumbSeparator`	Visual divider	Custom content via children
`BreadcrumbEllipsis`	Collapsed indicator	Custom content via children

Framework Integration

The asChild prop on BreadcrumbLink lets you use any routing library:

// Next.js
<BreadcrumbLink asChild>
  <Link href="/products">Products</Link>
</BreadcrumbLink>

// Regular HTML
<BreadcrumbLink href="/products">Products</BreadcrumbLink>

Production tips

Keep labels short and sweet. This free shadcn/ui breadcrumb looks best with concise labels. "Docs" beats "Documentation Pages". Save the long descriptions for page titles.

Don't mirror URLs blindly. URLs like /products/category-17/subcategory-42/item-99 make terrible breadcrumbs. Use human-readable labels that actually help navigation in your Next.js app.

Mobile needs special attention. Long breadcrumbs break on phones. Use the collapsed pattern or hide middle items. Your TypeScript breadcrumb component should adapt, not just shrink.

Current page or not? Some sites make the last item clickable (refreshes current page), others don't. Pick one pattern and stick with it across your React application.

Test with real content. Those neat breadcrumbs with "Home > Category > Page" look great in demos. Then production hits you with "Home > Women's Fashion > Shoes & Accessories > Athletic & Outdoor > Trail Running > Waterproof Models > Size 7.5". This open source shadcn component handles it, but plan for the worst case.

Integration with other components

Breadcrumbs pair perfectly with DropdownMenu components for handling collapsed sections in your React apps. The ellipsis trigger opens a menu showing hidden navigation levels.

For mobile navigation, combine breadcrumbs with Sheet components to show the full hierarchy in a slide-out panel. This open source pattern keeps mobile interfaces clean while maintaining navigation context.

In documentation sites, breadcrumbs work alongside Sidebar navigation to show both vertical and horizontal position. Your JavaScript components stay in sync, giving users multiple ways to navigate.

Shadcn Breadcrumb

Custom separator

Features

API Reference

Core Components

Framework Integration

Production tips

Integration with other components

Questions you might have

On this page

Shadcn Breadcrumb

Reactbreadcrumb

Reactdropdown-menu

Reactbreadcrumb

Reactbreadcrumb

Reactbreadcrumb

Reactbreadcrumb

Do breadcrumbs actually help with SEO?

Should I use a home icon or the word 'Home'?

How should breadcrumbs work on mobile?

What's the maximum breadcrumb depth?

Should the current page be in the breadcrumb?

Don't breadcrumbs duplicate the back button?

When should I use dropdown breadcrumbs?

Are breadcrumbs screen reader friendly?

On this page