Komponen / Navigasi

Breadcrumbs

Jejak lokasi halaman dalam hierarki modul: "Order & pengadaan › PO Customer". Biasanya dipakai di dalam PageHeader, di atas judul.

React · BetaFigma · siapFigma Sumber

Bawaan

Show current mati: jejak hanya berisi level induk, karena halaman saat ini sudah tampil sebagai judul PageHeader. Label Callout fg/muted, pemisah chevron 10 px fg/subtle, jarak 4.

import { BreadcrumbItem, Breadcrumbs } from '@divistant/circca-react';

// Bawaan (Show current mati): jejak hanya berisi level induk; level saat ini tampil sebagai judul PageHeader.
export default function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="#order">Order &amp; pengadaan</BreadcrumbItem>
      <BreadcrumbItem href="#po-customer">PO Customer</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Dengan halaman saat ini

Show current: item terakhir `current` — teks fg/default, bukan tautan, dan diberi aria-current="page". Pakai bila halaman tidak memiliki judul besar.

import { BreadcrumbItem, Breadcrumbs } from '@divistant/circca-react';

// Show current: level terakhir = halaman saat ini (fg/default, bukan tautan, aria-current="page").
export default function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="#order">Order &amp; pengadaan</BreadcrumbItem>
      <BreadcrumbItem href="#po-customer">PO Customer</BreadcrumbItem>
      <BreadcrumbItem current>PO-2026-0142</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Dengan Link Next.js

Pakai `asChild` agar elemen tetap <Link> (navigasi sisi klien + prefetch) dengan gaya tautan jejak.

import Link from 'next/link';
import { BreadcrumbItem, Breadcrumbs } from '@divistant/circca-react';

// asChild: gaya tautan jejak, elemen tetap <Link> Next.js (navigasi sisi klien + prefetch).
export default function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem asChild>
        <Link href="#keuangan">Keuangan</Link>
      </BreadcrumbItem>
      <BreadcrumbItem asChild>
        <Link href="#invoice-customer">Invoice customer</Link>
      </BreadcrumbItem>
    </Breadcrumbs>
  );
}

Jejak panjang

Level tengah diringkas menjadi "…" (state Overflow) dengan teks pembaca layar yang menyebut level yang disembunyikan.

import { BreadcrumbItem, BreadcrumbOverflow, Breadcrumbs } from '@divistant/circca-react';

// Jejak panjang: level teratas dan induk langsung tetap tampil, level tengah diringkas menjadi "…".
export default function Example() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="#order">Order &amp; pengadaan</BreadcrumbItem>
      <BreadcrumbOverflow label="2 level disembunyikan: PO Customer, PO-2026-0142" />
      <BreadcrumbItem href="#bast">BAST</BreadcrumbItem>
      <BreadcrumbItem current>BAST-2026-0088</BreadcrumbItem>
    </Breadcrumbs>
  );
}