Creative Tim UICreative Tim UI

Shadcn Breadcrumb

PreviousNext

A navigation aid that shows users their current location within a website's hierarchy and allows them to navigate back to parent pages.

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

export function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components/breadcrumb">
            Breadcrumb
          </BreadcrumbLink>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
 
export default function MyBreadcrumb() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Examples

Breadcrumb Basic

A simple breadcrumb with default chevron separators.

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

export function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components/breadcrumb">
            Breadcrumb
          </BreadcrumbLink>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Breadcrumb Custom Separator

Use custom text or symbols as separators between breadcrumb items.

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

export function BreadcrumbCustomSeparator() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>-</BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>-</BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink href="/docs/components/breadcrumb">
            Breadcrumb
          </BreadcrumbLink>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Breadcrumb with Icon

Include icons in breadcrumb items for enhanced visual clarity.

import { Home } from "lucide-react"

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

export function BreadcrumbWithIcon() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">
            <Home className="h-4 w-4" />
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Breadcrumb</BreadcrumbLink>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Breadcrumb Custom Styles

Apply custom styling to breadcrumb items with background colors and hover effects.

import { Box, ChevronRight, FileText, MousePointer } from "lucide-react"

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

export function BreadcrumbCustomStyles() {
  return (
    <Breadcrumb>
      <BreadcrumbList className="gap-0.5">
        <BreadcrumbItem>
          <BreadcrumbLink
            href="#"
            className="bg-secondary text-secondary-foreground hover:bg-primary hover:text-primary-foreground flex items-center gap-1.5 rounded px-2 py-1 transition-colors"
          >
            <FileText className="h-4 w-4" />
            Docs
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <ChevronRight className="h-4 w-4 stroke-2" />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink
            href="#"
            className="bg-secondary text-secondary-foreground hover:bg-primary hover:text-primary-foreground flex items-center gap-1.5 rounded px-2 py-1 transition-colors"
          >
            <Box className="h-4 w-4" />
            Components
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator>
          <ChevronRight className="h-4 w-4 stroke-2" />
        </BreadcrumbSeparator>
        <BreadcrumbItem>
          <BreadcrumbLink
            href="#"
            className="bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground flex items-center gap-1.5 rounded px-2 py-1 transition-colors"
          >
            <MousePointer className="h-4 w-4" />
            Breadcrumb
          </BreadcrumbLink>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Component Structure

The breadcrumb component consists of several sub-components that work together:

  • Breadcrumb: The root container element
  • BreadcrumbList: An ordered list that wraps breadcrumb items
  • BreadcrumbItem: Individual breadcrumb item wrapper
  • BreadcrumbLink: Clickable link element for navigation
  • BreadcrumbSeparator: Visual separator between items
  • BreadcrumbPage: Current page indicator (non-clickable)
  • BreadcrumbEllipsis: Ellipsis for truncated breadcrumbs

API Reference

The breadcrumb component consists of several sub-components that can be composed together:

Breadcrumb

The root navigation element that provides ARIA labels for accessibility.

  • className: Additional CSS classes for styling
  • Accepts all standard HTML nav element props

BreadcrumbList

An ordered list element that contains breadcrumb items.

  • className: Additional CSS classes for styling
  • Accepts all standard HTML ol element props

BreadcrumbItem

A list item wrapper for each breadcrumb link or page.

  • className: Additional CSS classes for styling
  • Accepts all standard HTML li element props

BreadcrumbLink

A clickable link element for navigation between pages.

  • asChild: Boolean to use Radix UI Slot for custom component rendering (default: false)
  • className: Additional CSS classes for styling
  • href: URL destination for the link
  • Accepts all standard HTML anchor element props

BreadcrumbSeparator

A visual separator between breadcrumb items.

  • children: Custom separator content (text, icon, etc.) - defaults to ChevronRight icon
  • className: Additional CSS classes for styling
  • Accepts all standard HTML li element props

BreadcrumbPage

Represents the current page (non-clickable, end of breadcrumb trail).

  • className: Additional CSS classes for styling
  • Accepts all standard HTML span element props

Accessibility

The breadcrumb component is built with accessibility in mind:

  • Uses semantic <nav> element with aria-label="breadcrumb"
  • Ordered list structure (<ol>) for proper hierarchy
  • Current page indicated with aria-current="page"
  • Separators marked with aria-hidden="true" to avoid screen reader clutter
  • Keyboard navigable links with proper focus states

Best Practices

  1. Keep it Simple: Limit breadcrumbs to 3-5 levels for better UX
  2. Start with Home: Always include a home or root link as the first item
  3. Current Page: Use BreadcrumbPage for the current page instead of a link
  4. Consistent Separators: Use the same separator style throughout your site
  5. Mobile Consideration: Consider truncating with ellipsis on small screens
  6. Clear Labels: Use descriptive text that matches page titles