Breadcrumb

Stable

Displays the path to the current resource using a hierarchy of links.

Examples

Basic Usage

tsx
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Neon Variant

Uses glowing cyberpunk aesthetics for terminal-style paths.

tsx
<Breadcrumb variant="neon">
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="#">~</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbLink href="#">sys</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>kernel.log</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Ghost Variant

tsx
<Breadcrumb variant="ghost">...</Breadcrumb>

API Reference

PropertyDescriptionTypeDefault
variantVisual style for the breadcrumb."default" | "neon" | "ghost""default"