Breadcrumbs

Navigation

Navigation breadcrumbs to show the current page location within a hierarchical structure.

Preview

Standard breadcrumb navigation

Separator Variants

Different separator styles

Chevron (default)

Slash

Dot

With Icons

Breadcrumbs with leading home icon

Truncated

Collapsed breadcrumbs for deep hierarchies

Props

Breadcrumbs component API reference

Prop	Type	Default	Description
`items*`	`BreadcrumbItem[]`	—	Array of breadcrumb items with label and href
`separator`	`'chevron' \| 'slash' \| 'dot'`	`'chevron'`	Separator style between items
`showHome`	`boolean`	`true`	Show home icon as first item
`maxItems`	`number`	—	Maximum items before truncation
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { Breadcrumbs } from '@/components/ui/breadcrumbs'

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    { label: 'Projects', href: '/projects' },
    { label: 'Design System', href: '/projects/design' },
    { label: 'Components' },
  ]}
  separator="chevron"
  showHome
/>

Features

Built-in functionality

Three separator styles: Chevron, slash, and dot separators
Home icon: Optional home icon as first breadcrumb
Truncation: Collapse middle items for deep paths
Accessible: Proper nav landmark and aria-current
Dark mode: Full dark mode support

Accessibility

ARIA support and keyboard navigation

ARIA Attributes

nav element with aria-label="Breadcrumb"aria-current="page" on current pageOrdered list (ol) for semantic structure

Keyboard Navigation

Key	Action
`Tab`	Navigate between breadcrumb links
`Enter`	Follow breadcrumb link

Notes

Uses nav landmark for screen reader navigation
Current page is not a link (non-interactive)
Separator is decorative (hidden from screen readers)

Related Components

Tabs Sidebar Steps Pagination