Remah roti

Remah roti menyatakan di mana sebuah halaman berada. Item terakhirnya adalah halaman saat ini: ia dirender sebagai teks biasa dan ditandai aria-current="page", karena tautan ke halaman yang sedang Anda buka hanyalah kebisingan.

Remah roti dasar

breadcrumbs({
  items: [
    { label: 'Beranda', href: '/' },
    { label: 'Dokumentasi', href: '/docs' },
    { label: 'Perutean' },
  ],
})

Pemisah

String atau markup apa pun. Pemisahnya tetap disembunyikan dari pembaca layar.

stack({ gap: 'md' },
  breadcrumbs({
    separator: '/',
    items: [{ label: 'Beranda', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Remah roti' }],
  }),
  breadcrumbs({
    separator: '›',
    items: [{ label: 'Beranda', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Remah roti' }],
  }),
  breadcrumbs({
    separator: '·',
    items: [{ label: 'Beranda', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Remah roti' }],
  }),
)

String biasa

Item tanpa href hanyalah teks, di mana pun ia muncul — bukan hanya di bagian akhir.

breadcrumbs({
  items: ['Beranda', 'Arsip', '2026', 'Maret'],
})

Dari sebuah jalur

Di situs statis, jejaknya biasanya diturunkan dari rutenya, bukan ditulis tangan.

return (() => {
  const path = '/docs/guides/routing'
  const segments = path.split('/').filter(Boolean)

  return breadcrumbs({
    items: [
      { label: 'Beranda', href: '/' },
      ...segments.map((segment, index) => ({
        label: segment.replace(/-/g, ' '),
        href: index === segments.length - 1 ? undefined : '/' + segments.slice(0, index + 1).join('/'),
      })),
    ],
  })
})()

Memberi label pada nav-nya

Keseluruhannya adalah sebuah <nav> dengan nama yang dapat diakses, sehingga pembaca layar bisa melompat ke sana. Ubah namanya dengan label ketika sebuah halaman punya lebih dari satu markah navigasi.

breadcrumbs({
  label: 'Remah roti dokumentasi',
  items: [{ label: 'Dokumentasi', href: '/docs' }, { label: 'Komponen' }],
})

Props

Prop	Tipe	Bawaan	Deskripsi
`items`	`Array`	`[]`	String, atau objek { label, href }. Yang terakhir adalah halaman saat ini.
`separator`	`Child`	`'/'`	Digambar di antara item, disembunyikan dari pembaca layar.
`label`	`string`	`'Breadcrumb'`	Nama yang dapat diakses untuk markah nav-nya.