Breadcrumb

The Breadcrumb component is a pixel-art styled navigation trail.
It supports links, click handlers, and custom separators — ideal for showing the user’s location within a site hierarchy with a retro aesthetic.

🚀 Usage

Basic Example


import { Breadcrumb } from "pixelartui-react";
 
<Breadcrumb
    items={[
        { label: "Home", href: "#" },
        { label: "Products", href: "#" },
        { label: "Current Page" },
    ]}
/>

With onClick


<Breadcrumb
    items={[
        { label: "Home", onClick: () => console.log("Home") },
        { label: "Category", onClick: () => console.log("Category") },
        { label: "Item" },
    ]}
/>

Custom Separator


<Breadcrumb
    items={[
        { label: "Home", href: "#" },
        { label: "Products", href: "#" },
        { label: "Current Page" },
    ]}
    separator="/"
/>

Two Items


<Breadcrumb
    items={[
        { label: "Home", href: "#" },
        { label: "Page" },
    ]}
/>

Styles


<Breadcrumb
    items={[{ label: "Home", href: "#" }, { label: "Page" }]}
    breadcrumbStyle="dark"
/>
 
<Breadcrumb
    items={[{ label: "Home", href: "#" }, { label: "Page" }]}
    breadcrumbStyle="light"
/>

🔧 Props

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	—	Array of breadcrumb items to display.
`separator`	`string`	`">"`	Character(s) displayed between breadcrumb items.
`breadcrumbStyle`	`"dark" \| "light"`	`undefined`	Applies a light or dark theme to the component.
`className`	`string`	`undefined`	Adds additional CSS classes for custom styling.

BreadcrumbItem

Prop	Type	Default	Description
`label`	`string`	—	Display text for the breadcrumb item.
`href`	`string`	`undefined`	URL to navigate to (renders as a link).
`onClick`	`() => void`	`undefined`	Click handler (renders as a button).