Breadcrumbs

Clear path navigation for nested pages and flows.

Installation

npx shadcn@latest add @iconiq/breadcrumbs

Props

Breadcrumb

Root semantic navigation wrapper for a breadcrumb trail.

classNamestring

Merged onto the nav element for placement inside headers, toolbars, and page shells.

The root nav always uses aria-label="breadcrumb".

Compose BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, and BreadcrumbSeparator inside the root.

BreadcrumbList

Animated ordered list that lays out breadcrumb segments and separators.

classNamestring

Merged with the default flex wrapping, spacing, and muted text styles.

Layout changes are animated with Motion, and AnimatePresence uses popLayout so inserted or removed items keep the trail fluid.

BreadcrumbItem

Animated list item wrapper for each breadcrumb segment.

classNamestring

Merged with the inline-flex item layout. Dynamic items should receive stable React keys when rendered from arrays.

BreadcrumbLink

Base UI render-compatible link for navigable breadcrumb segments.

hrefstring

Destination for the linked segment. You can also compose a router link with the render prop.

renderReactElement | render function

Optional Base UI render override for composing with framework-specific links while preserving merged props.

classNamestring

Merged with the default color transition and hover foreground treatment.

BreadcrumbPage

Current page segment rendered as disabled link-like text with aria-current.

classNamestring

Merged with the default foreground current-page text style.

BreadcrumbSeparator

Animated visual separator between breadcrumb items, defaulting to a chevron icon.

childrenReactNode

Optional custom separator content. When omitted, ChevronRightIcon is rendered.

classNamestring

Merged with the default icon sizing class for separator icons.

Separators render with role='presentation' and aria-hidden.

BreadcrumbEllipsis

Compact overflow marker for collapsed breadcrumb paths.

classNamestring

Merged with the default 20px square centered icon layout.

Accessibility and motion

The compound API keeps semantic breadcrumb structure while layering Motion on top.

BreadcrumbList wraps the trail in an ordered list.

BreadcrumbItem, BreadcrumbSeparator, and BreadcrumbEllipsis keep the same subtle fade, slide, and layout transitions from the previous implementation.

BreadcrumbPage marks the final segment with aria-current='page'.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react, motion, lucide-react.