Breadcrumb

A navigation component that shows the user their current location within a hierarchy. Built with compound components: Breadcrumb.Link and Breadcrumb.Separator.

Basic

Custom Separator

Arrow Separator

With Icons

Links can contain icons alongside text for better visual context.

Long Path

Styled Container

Wrap the breadcrumb in a styled card with chevron SVG separators.

Breadcrumb Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Breadcrumb links and separators.
`className`	`string`	—	Additional CSS classes.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

children

ReactNode

Breadcrumb links and separators.

className

string

Additional CSS classes.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

Breadcrumb.Link Props

Prop	Type	Default	Description
`href`	`string`	—	The URL the link points to.
`active`	`boolean`	`false`	Marks the link as the current page. Active links are visually distinct and not clickable.

href

string

The URL the link points to.

activefalse

boolean

Marks the link as the current page. Active links are visually distinct and not clickable.

Breadcrumb.Separator Props

Prop	Type	Default	Description
`children`	`ReactNode`	`"/"`	Custom separator character or element.

children"/"

ReactNode

Custom separator character or element.