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

import { Breadcrumb, BreadcrumbItem } from "@plexui/vue/components/Breadcrumb";

Examples

API

Prop	Type	Default	Description
`size`	`"sm" \| "md"`	`"md"`	Text size: sm above a compact header, md above a page title
`aria-label`	`string`	`"Breadcrumb"`	Name of the navigation landmark
`separator slot`	`VNode[]`	`a small chevron`	What stands between two items
`default slot`	`VNode[]`	—	The BreadcrumbItem elements

Other attributes fall through to the <nav>.

Prop	Type	Default	Description
`href`	`string`	—	Link destination. Internal paths use the link component from PlexUIProvider
`to`	`string \| RouteLocation`	—	Router destination, for link components that take to
`current`	`boolean`	`false`	The current page: plain text marked aria-current="page"
`@click`	`(event: MouseEvent) => void`	—	Makes an item without a destination act as a button
`class`	`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.