Breadcrumb

Navigasi jejak halaman untuk menunjukkan posisi user dalam hirarki konten.

import { Breadcrumb } from "@naraya/ui";

Default

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

Custom separator

<Breadcrumb separator={<ChevronRight size={14} />} items={...} />

With click handler

<Breadcrumb items={[{ label: "Dashboard", onClick: ... }, { label: "Settings", onClick: ... }, { label: "Billing" }]} />

Prop	Type	Default	Description
items*	`BreadcrumbItem[]`	—	Daftar item breadcrumb.
separator	`ReactNode`	—	Separator custom antar item.
className	`string`	—	Class tambahan wrapper.
BreadcrumbItem.label*	`ReactNode`	—	Label item.
BreadcrumbItem.href	`string`	—	Link tujuan.
BreadcrumbItem.onClick	`() => void`	—	Handler klik item.

--text-muted

Link breadcrumb default

--text-main

Current item

--color-primary

Hover/focus accent