Core Elements
Breadcrumb
Shows the user's location in a hierarchy, in "plain" or bordered "border" style.
Usage
Installation
npx wunderui-cli add breadcrumbWrites the source into your project with its dependencies and, on first use, the styles — see Installation.
Then import what you need:
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"Examples
Chips
Each step as a bordered chip.
Plain
Plain text separated by chevrons.
Underlined
Links underlined, the current page in bold.
In context
How the component is used inside real screens — the same compositions as the Usage section of the Figma page.
Page header
Breadcrumb above a page title with actions — the pattern of the app-shell blocks.