Breadcrumbs

navigation

Navigation breadcrumb trail with home icon, chevron separators, path truncation for deep hierarchies, and ARIA breadcrumb landmark. Supports custom separators, max visible items with ellipsis, and text truncation for long labels.

Import

typescript
import { Breadcrumbs } from "packages/ui/src";

Props

BreadcrumbsProps

PropTypeRequired
itemsBreadcrumbItem[]Yes
separatorstringNo
showHomebooleanNo
truncatebooleanNo
maxVisiblenumberNo

Examples

Breadcrumbs

Navigation breadcrumb trail with home icon, separator customization, path truncation, and ARIA breadcrumb landmark. 21st shared component — 12 dedicated tokens.

Interactive Playground

Simple Path

Deep Path with Truncation

Custom Separator

Without Home Icon

Real-World Use Cases

Design System Navigation

Project Drill-Down

Pipeline Status

Metadata

Component Metadata
Familynavigation
FrameworksNext.js, Astro/EmDash
DescriptionNavigation breadcrumb trail with home icon, chevron separators, path truncation for deep hierarchies, and ARIA breadcrumb landmark. Supports custom separators, max visible items with ellipsis, and text truncation for long labels.
PropsBreadcrumbsProps (items: BreadcrumbItem[], separator?: string, showHome?: boolean, truncate?: boolean, maxVisible?: number)
Statesdefault, with-home, truncated, ellipsis, deep-path
A11y
  • nav element with aria-label=Breadcrumb
  • aria-current=page on last item
  • Separators are aria-hidden
  • Home icon link has aria-label
Responsive
  • Wraps on narrow viewports
  • Truncation for long labels
Motion
  • Link hover color transition 150ms ease
Token Dependencies
  • components.breadcrumbs.background
  • components.breadcrumbs.separatorColor
  • components.breadcrumbs.linkColor
  • components.breadcrumbs.linkHoverColor
  • components.breadcrumbs.currentColor
  • components.breadcrumbs.fontSize
  • components.breadcrumbs.gap
  • components.breadcrumbs.padding
  • components.breadcrumbs.truncateMaxWidth
  • components.breadcrumbs.homeIconColor
  • components.breadcrumbs.homeIconHoverColor
  • components.breadcrumbs.ellipsisColor
Content Slotsitems[].label (string), items[].href (string)
CMS Bindings
  • Path from CMS navigation tree
  • Labels from CMS page titles
Test Cases
  • Renders all breadcrumb items
  • Last item has aria-current=page
  • Shows home icon by default
  • Hides home icon when showHome=false
  • Shows ellipsis when maxVisible set
  • Has nav with aria-label
  • Custom separator renders
  • Passes className through