Breadcrumbs

Clear path navigation for nested pages and flows.

Nested docs pages stay easy to navigate from here.

Installation

npx shadcn@latest add @iconiq/breadcrumbs

Props

Breadcrumb

1 prop

Root semantic navigation wrapper for a breadcrumb trail.

classNamestring

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

Notes

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

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

BreadcrumbList

1 prop

Animated ordered list that lays out breadcrumb segments and separators.

classNamestring

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

Notes

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

BreadcrumbItem

1 prop

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

3 props

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

1 prop

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

classNamestring

Merged with the default foreground current-page text style.

BreadcrumbSeparator

2 props

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.

Notes

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

BreadcrumbEllipsis

1 prop

Compact overflow marker for collapsed breadcrumb paths.

classNamestring

Merged with the default 20px square centered icon layout.