Core ElementsFree

Breadcrumb

Shows the user's location in a hierarchy, in "plain" or bordered "border" style.

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@wunderui/react"

Each step as a bordered chip.

Plain text separated by chevrons.

Links underlined, the current page in bold.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Breadcrumb above a page title with actions — the pattern of the app-shell blocks.

12 screens · updated 2 h ago

Prop	Type	Default
variant	"plain" \| "border" \| "underline"	"plain"