Lucent UI
← FormFieldBreadcrumbNavLink →
✦ LLM-ready

Breadcrumb

atom

Horizontal trail of navigational links showing the user's location within a hierarchy. Supports custom separators and click handlers.

"Add a Breadcrumb from lucent-ui showing a three-level navigation path: Home → Components → current page."

Usage

React / JSX
import { Breadcrumb } from 'lucent-ui'

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

Installation

pnpm add lucent-ui

API Reference

Breadcrumb props — * required

PropTypeDefaultDescription
items*BreadcrumbItem[]—Array of breadcrumb items. Each item has label, optional href and onClick.
separatorReact.ReactNode"/>"Custom separator between items. Defaults to "/".
styleReact.CSSProperties—Inline styles for the breadcrumb container.