Gezinti yolu

Gezinti yolu bir sayfanın nerede durduğunu söyler. Son öğe geçerli sayfadır: düz metin olarak işlenir ve aria-current="page" ile işaretlenir, çünkü zaten bulunduğunuz sayfaya bir bağlantı gürültüdür.

Temel kırıntı yolu

breadcrumbs({
  items: [
    { label: 'Ana sayfa', href: '/' },
    { label: 'Belgeler', href: '/docs' },
    { label: 'Yönlendirme' },
  ],
})

Ayraç

Herhangi bir dize ya da biçimlendirme. Ayraçlar her hâlükârda ekran okuyuculardan gizlenir.

stack({ gap: 'md' },
  breadcrumbs({
    separator: '/',
    items: [{ label: 'Ana sayfa', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Gezinti yolu' }],
  }),
  breadcrumbs({
    separator: '›',
    items: [{ label: 'Ana sayfa', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Gezinti yolu' }],
  }),
  breadcrumbs({
    separator: '·',
    items: [{ label: 'Ana sayfa', href: '/' }, { label: 'UI', href: '/ui' }, { label: 'Gezinti yolu' }],
  }),
)

Düz dizeler

href’i olmayan bir öğe, yalnızca sonda değil, nerede görünürse görünsün yalnızca metindir.

breadcrumbs({
  items: ['Ana sayfa', 'Arşiv', '2026', 'Mart'],
})

Bir yoldan

Statik bir sitede iz genellikle elle yazılmaz, rotadan türetilir.

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

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

Gezinmeyi etiketlemek

Bütünü, erişilebilir bir adı olan bir <nav> öğesidir, böylece bir ekran okuyucu ona atlayabilir. Bir sayfada birden çok gezinme yer imi varsa adı label ile değiştirin.

breadcrumbs({
  label: 'Belge gezinti yolu',
  items: [{ label: 'Belgeler', href: '/docs' }, { label: 'Bileşenler' }],
})

Proplar

Prop	Tür	Varsayılan	Açıklama
`items`	`Array`	`[]`	Dizeler ya da { label, href } nesneleri. Sonuncusu geçerli sayfadır.
`separator`	`Child`	`'/'`	Öğeler arasına çizilir, ekran okuyuculardan gizlenir.
`label`	`string`	`'Breadcrumb'`	Gezinme yer imi için erişilebilir ad.