Breadcrumb

A navigation trail showing the user's current location within a hierarchy.

Breadcrumb

Installation

pnpm dlx stera-ui@latest add breadcrumb

Composition

Use the following composition to build a Breadcrumb:

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    ├── BreadcrumbItem
    │   └── BreadcrumbLink
    ├── BreadcrumbSeparator
    └── BreadcrumbItem
        └── BreadcrumbPage

Examples

Custom Separator

Pass any element as a child of BreadcrumbSeparator to replace the default chevron icon.

Custom Separator

Compose BreadcrumbItem with DropdownMenu to turn an item into a sibling-page picker.

Dropdown

Or use a compact ellipsis trigger to expose collapsed siblings.

Dropdown (Ellipsis)

Collapsed

Use BreadcrumbEllipsis to represent hidden middle items in long paths.

Collapsed

Link Component

Use the render prop on BreadcrumbLink to swap the underlying anchor for a routing-library link such as Next.js Link.

Link Component

API Reference

BreadcrumbLink

Prop	Type	Description
`render`	`ReactElement`	Render prop for the underlying anchor element (e.g. `<a>`, Next.js `<Link>`)

Subcomponents

Component	Description
`BreadcrumbList`	Ordered list container
`BreadcrumbItem`	Individual list item
`BreadcrumbLink`	Clickable ancestor link
`BreadcrumbPage`	Non-linked current page label
`BreadcrumbSeparator`	Divider between items (default: chevron)
`BreadcrumbEllipsis`	Collapsed items indicator