Skip to main content
ParticleUI

Breadcrumb

Accessible breadcrumb navigation with separator, ellipsis, and current page slots.

Installation

1

Run the CLI

$npx particleui-cli add breadcrumb

Usage

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

export default function Example() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbPage>Components</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Details

Source filecomponents/ui/breadcrumb.tsx
Typeui
Categoriesnavigation, core
npm dependencieslucide-react
Registry deps
Claude skill