Breadcrumb

A composable breadcrumb navigation component that shows the user's current location within a site hierarchy.

View Markdown

Default

Custom Separator

With Ellipsis

With Icon

With Next.js Link

API Reference

BreadcrumbRoot

Navigation container that renders a <nav> with an inner <ol>. Props are spread onto the <nav> element.

Prop	Type	Default	Description
className	string	-	Additional CSS classes for the nav element
...props	React.ComponentProps<"nav">	-	Standard nav element props

BreadcrumbItem

List item wrapper for breadcrumb elements. Renders as a <li>.

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps<"li">	-	Standard li element props

BreadcrumbLink

Navigable link within a breadcrumb item. Renders as an <a> by default. Use the render prop to replace with a custom link component (e.g. Next.js Link).

Prop	Type	Default	Description
render	ReactElement \| (props, state) => ReactElement	-	Replaces the default <a> element with a custom component.
href	string	-	URL the link points to
className	string	-	Additional CSS classes
...props	React.ComponentProps<"a">	-	Standard anchor element props

BreadcrumbPage

Current page indicator. Renders as a <span> with aria-current="page".

Prop	Type	Default	Description
className	string	-	Additional CSS classes
...props	React.ComponentProps<"span">	-	Standard span element props

BreadcrumbSeparator

Visual separator between breadcrumb items. Renders as a <li> with role="presentation". Defaults to "/" when no children provided.

Prop	Type	Default	Description
children	React.ReactNode	"/"	Custom separator content (e.g., a chevron icon)
className	string	-	Additional CSS classes
...props	React.ComponentProps<"li">	-	Standard li element props

BreadcrumbEllipsis

Collapsed items indicator. Renders as a <li> with role="presentation". Defaults to "..." when no children provided.

Prop	Type	Default	Description
children	React.ReactNode	"..."	Custom ellipsis content
className	string	-	Additional CSS classes
...props	React.ComponentProps<"li">	-	Standard li element props