Breadcrumbs

stable

Hierarchical navigation trail with configurable separator, overflow collapse, and semantic markup

NavigationInteractive/Storybook ↗

import { Breadcrumbs } from "@nodus/design-system"

Demo coming soon

Props

Prop	Type	Default	Description
`items`req	`BreadcrumbItem[]`	—	Array of breadcrumb entries with label, optional href and onClick
`separator`	`ReactNode`	"/"	Custom separator element
`maxItems`	`number`	—	Maximum visible items before collapse
`size`	`"sm" \| "md" \| "lg"`	"md"	Text size

itemsrequired

Type BreadcrumbItem[]Default —

Array of breadcrumb entries with label, optional href and onClick

separator

Type ReactNodeDefault "/"

Custom separator element

maxItems

Type numberDefault —

Maximum visible items before collapse

size

Type "sm" | "md" | "lg"Default "md"

Text size

Accessibility

Uses <nav aria-label="Breadcrumb"> landmark
Ordered list (<ol>) for proper structure
aria-current="page" on last item
Separators are aria-hidden
Interactive items use <a> or <button>, never <span role="button">

Metadatasmmdlgsemantic type space

Design Rationale

This component was designed to express:

View all principles →

Explore Related

Tabbed content navigation with Radix accessibility

SegmentedControl→

Button group for switching between related views

Multi-step progress indicator with horizontal/vertical orientation and step status tracking

Was this helpful?