Live Docs

Navigation /

stable

Breadcrumb

Navigasi jejak halaman untuk menunjukkan posisi user dalam hirarki konten.

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

Examples

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" }]} />

Props

PropTypeDefaultDescription
items*BreadcrumbItem[]Daftar item breadcrumb.
separatorReactNodeSeparator custom antar item.
classNamestringClass tambahan wrapper.
BreadcrumbItem.label*ReactNodeLabel item.
BreadcrumbItem.hrefstringLink tujuan.
BreadcrumbItem.onClick() => voidHandler klik item.

Tokens Used

--text-muted

Link breadcrumb default

--text-main

Current item

--color-primary

Hover/focus accent

Accessibility

  • Wrapper menggunakan nav dengan aria-label='Breadcrumb'.
  • Item terakhir diberi aria-current='page'.
  • Gunakan label item yang representatif terhadap route.