Breadcrumb - Stera UI

Installation

pnpm dlx stera-ui add breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbList,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink render={<a href="/" />}>Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current Page</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom Separator

Pass any element as a child of BreadcrumbSeparator to replace the default chevron icon.

Collapsed

Use BreadcrumbEllipsis to represent hidden middle items in long paths.

API Reference

BreadcrumbLink

Prop	Type	Description
`render`	`ReactElement`	Render prop for the underlying anchor element (e.g. `<a>`, Next.js `<Link>`)

Subcomponents

Component	Description
`BreadcrumbList`	Ordered list container
`BreadcrumbItem`	Individual list item
`BreadcrumbLink`	Clickable ancestor link
`BreadcrumbPage`	Non-linked current page label
`BreadcrumbSeparator`	Divider between items (default: chevron)
`BreadcrumbEllipsis`	Collapsed items indicator