Breadcrumb

A breadcrumb navigation component for showing the current page location and navigation path.

Basic Usage

import { Breadcrumb } from 'uiplex';

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Products", href: "/products" },
    { label: "Electronics", href: "/products/electronics" },
    { label: "Laptops" }
  ]}
/>

Custom Separator

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "About", href: "/about" },
    { label: "Team" }
  ]}
  separator=">"
/>

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Blog", href: "/blog" },
    { label: "Post" }
  ]}
  separator="→"
/>

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Settings", href: "/settings" },
    { label: "Profile" }
  ]}
  separator={<span style={{ margin: "0 0.25rem" }}>•</span>}
/>

With onClick Handler

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { 
      label: "Dashboard", 
      onClick: () => console.log("Navigate to dashboard")
    },
    { label: "Analytics" }
  ]}
/>

Simple Path

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

Long Path

<Breadcrumb
  items={[
    { label: "Home", href: "/" },
    { label: "Documentation", href: "/docs" },
    { label: "Components", href: "/docs/components" },
    { label: "Forms", href: "/docs/components/forms" },
    { label: "Input" }
  ]}
/>

API Reference

Prop	Type	Default	Description
items	BreadcrumbItem[]	-	Array of breadcrumb items (required)
separator	string \| React.ReactNode	"/"	Separator between breadcrumb items
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles
...props	React.HTMLAttributes<HTMLElement>	-	All standard HTML nav attributes

BreadcrumbItem

Prop	Type	Default	Description
label	string	-	Display text for the breadcrumb item (required)
href	string	-	URL for navigation (optional, if not provided item is not clickable)
onClick	() => void	-	Click handler function (optional, takes precedence over href)