Breadcrumb

A navigational component that displays the user's current location within a website's hierarchy. It provides links back to each previous page the user navigated through, enhancing usability and site navigation. Perfect for improving user experience in Astro projects by clearly indicating the path taken to reach the current page.

Install

pnpm dlx hybrid-astro-ui@latest add breadcrumb

npx hybrid-astro-ui@latest add breadcrumb

yarn dlx hybrid-astro-ui@latest add breadcrumb

bunx hybrid-astro-ui@latest add breadcrumb

Usage

---
import { 
    Breadcrumb, 
    BreadcrumbItem, 
    BreadcrumbLink, 
    BreadcrumbSeparator, 
    BreadcrumbLocation, 
    BreadcrumbPopover 
} from "@/src/components/hybrid-astro-ui/breadcrumb"
---
<Breadcrumb>
    <BreadcrumbItem>
        <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator  />
    <BreadcrumbItem>
        <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbPopover>
        <BreadcrumbItem>
            <BreadcrumbLink href="/components/formatted-date">FormattedDate</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbItem>
            <BreadcrumbLink href="/components/button">Button</BreadcrumbLink>
        </BreadcrumbItem>
    </BreadcrumbPopover>
    <BreadcrumbSeparator  />
    <BreadcrumbItem>
        <BreadcrumbLocation>Breadcrumb</BreadcrumbLocation>
    </BreadcrumbItem>
</Breadcrumb>

API Reference

Breadcrumb is a small set of composable primitives. You compose the navigation by combining Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPopover, and BreadcrumbLocation.

Breadcrumb (Root)

• class?: string — Optional classes applied to the root nav element.

BreadcrumbItem

• class?: string — Optional classes applied to the item wrapper.

BreadcrumbLink

• href: string — Link destination.
• class?: string — Optional classes applied to the anchor.
• ...rest — Any other anchor attributes (for example target, rel, aria-current, etc.).

BreadcrumbSeparator

• variant?: "default" | "arrow" | "chevron" — Separator glyph style.
• class?: string — Optional classes applied to the separator.

BreadcrumbLocation

• class?: string — Optional classes applied to the current location text.

BreadcrumbPopover

• class?: string — Optional classes applied to the popover wrapper.

Notes

• The root Breadcrumb renders a semantic nav with aria-label=breadcrumb.