Breadcrumb | Bearnie

<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>

Installation

npx bearnie add breadcrumb

import Breadcrumb from "@/components/ui/breadcrumb/Breadcrumb.astro";
import BreadcrumbList from "@/components/ui/breadcrumb/BreadcrumbList.astro";
import BreadcrumbItem from "@/components/ui/breadcrumb/BreadcrumbItem.astro";
import BreadcrumbLink from "@/components/ui/breadcrumb/BreadcrumbLink.astro";
import BreadcrumbPage from "@/components/ui/breadcrumb/BreadcrumbPage.astro";
import BreadcrumbSeparator from "@/components/ui/breadcrumb/BreadcrumbSeparator.astro";

Usage

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

<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>Current</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>

Examples

With icon

<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">
      <House class="size-4" />
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>

Collapsed

<Breadcrumb>
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbEllipsis>
      <a href="#_" class="block px-3 py-1.5 text-sm hover:bg-accent rounded-md">Docs</a>
      <a href="#_" class="block px-3 py-1.5 text-sm hover:bg-accent rounded-md">sponsors</a>
    </BreadcrumbEllipsis>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>

Anatomy

Breadcrumb - The root nav element
BreadcrumbList - Ordered list container
BreadcrumbItem - Individual list item
BreadcrumbLink - Clickable navigation link
BreadcrumbPage - Current page indicator (not clickable)
BreadcrumbSeparator - Visual separator between items
BreadcrumbEllipsis - Collapsed items indicator

Props

BreadcrumbLink

Prop	Type	Default	Description
href	string	required	Link destination
class	string	-	Additional CSS classes

All other Breadcrumb components accept class for additional CSS classes.