The trail of pages that leads to the current one, above a page title, with links, plain steps and the current page.

import { Breadcrumb } from "@plexui/ui/components/Breadcrumb";

Examples

API

Prop	Type	Default	Description
`size`	`"sm" \| "md"`	`"md"`	Text size: sm above a compact header, md above a page title
`separator`	`ReactNode`	`a small chevron`	What stands between two items
`aria-label`	`string`	`"Breadcrumb"`	Name of the navigation landmark
`className`	`string`	—	Applied to the nav element

Other <nav> attributes are forwarded.

Prop	Type	Default	Description
`href`	`string`	—	Link destination. Internal paths use the linkComponent of PlexUIProvider
`to`	`string`	—	Router destination, for link components that take to
`current`	`boolean`	`false`	The current page: plain text marked aria-current="page"
`onClick`	`(event: MouseEvent) => void`	—	Makes an item without a destination act as a button
`className`	`string`	—	Applied to the li element

Breadcrumb reads these component tokens. Override them at any scope to restyle it:

--breadcrumb-font-size: text size (--font-text-sm-size, or --font-text-xs-size at sm)
--breadcrumb-line-height: line height
--breadcrumb-gap: space around separators (spacing(1), or spacing(0.5) at sm)

Links use the secondary text color and turn to the text color on hover; the current page uses the text color; separators use the tertiary color.