Skip to content
Logobaseui-cn

Breadcrumb

A navigation trail showing the user's current location.

navigationdisplay
Loading preview...

Installation

Terminal
npx baseui-cn add breadcrumb

The CLI installs styles/navigation.styles.css alongside the component. For manual installation, copy that stylesheet from the registry and keep the component import. It uses the existing semantic theme variables.

Usage

Code
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
Code
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

Custom separator

Swap the separator icon to match your routing style or product tone.

Loading preview...

Collapsed trail

Use BreadcrumbEllipsis when intermediate levels should stay compact.

Loading preview...