Breadcrumbs

Navigation

Layout

Show current page hierarchy and allow navigation through parent pages.

Preview

Simple breadcrumb navigation with icons and hover states

With Overflow

Collapsed middle items with dropdown menu for long paths

Props

Component API reference

Prop	Type	Default	Description
`items*`	`BreadcrumbItem[]`	—	Array of breadcrumb items
`separator`	`ReactNode`	`<ChevronRight />`	Custom separator element
`maxItems`	`number`	—	Max visible items before collapsing
`className`	`string`	—	Additional CSS classes

BreadcrumbItem Type

Prop	Type	Default	Description
`label*`	`string`	—	Display text
`href`	`string`	—	Link destination
`icon`	`ComponentType`	—	Optional icon component
`current`	`boolean`	—	Mark as current page

Usage

Import and implementation examples

import { Home, ChevronRight } from 'lucide-react'

const items = [
  { label: 'Home', href: '/', icon: Home },
  { label: 'Projects', href: '/projects' },
  { label: 'Website Redesign', href: '/projects/website' },
  { label: 'Settings', current: true },
]

// Basic breadcrumbs
<nav className="flex items-center gap-1 text-sm">
  {items.map((item, index) => (
    <div key={item.label} className="flex items-center">
      {index > 0 && <ChevronRight className="w-4 h-4 text-slate-300 mx-1" />}
      {item.current ? (
        <span className="text-slate-800 font-medium">{item.label}</span>
      ) : (
        <a
          href={item.href}
          className="flex items-center gap-1.5 text-slate-500 hover:text-indigo-600"
        >
          {item.icon && <item.icon className="w-4 h-4" />}
          {item.label}
        </a>
      )}
    </div>
  ))}
</nav>

// With overflow handling
// Use maxItems prop to collapse middle items into dropdown

Features

Built-in functionality

Icon support: Add icons to breadcrumb items
Overflow handling: Collapse middle items into dropdown
Current page: Visual indication of current location
Custom separators: Use any separator element
Hover states: Interactive link styling
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses nav element with aria-label="Breadcrumb"aria-current="page" on current itemDropdown has aria-haspopup and aria-expanded

Keyboard Navigation

Key	Action
`Tab`	Navigate between links
`Enter`	Follow link
`Space`	Open overflow dropdown
`Escape`	Close dropdown

Notes

Screen readers announce navigation hierarchy
Links are focusable and clickable
Current page is not a link

Related Components

Navigation Tabs Link