Okruszki

Okruszki mówią, gdzie leży strona. Ostatni element to strona bieżąca: renderuje się jako zwykły tekst i ma aria-current="page", bo odnośnik do strony, na której już jesteś, to szum.

Podstawowe okruszki

breadcrumbs({
  items: [
    { label: 'Start', href: '/' },
    { label: 'Dokumentacja', href: '/docs' },
    { label: 'Routing' },
  ],
})

Separator

Dowolny ciąg znaków albo znaczniki. Tak czy inaczej separatory są ukryte przed czytnikami ekranu.

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

Zwykłe ciągi znaków

Element bez href to po prostu tekst, gdziekolwiek się pojawi — nie tylko na końcu.

breadcrumbs({
  items: ['Start', 'Archiwum', '2026', 'Marzec'],
})

Ze ścieżki

Na witrynie statycznej ślad zwykle wyprowadza się z trasy, a nie pisze ręcznie.

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

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

Nazwanie nawigacji

Całość to <nav> z dostępną nazwą, więc czytnik ekranu może do niej przeskoczyć. Zmień nazwę przez label, gdy strona ma więcej niż jeden punkt orientacyjny nawigacji.

breadcrumbs({
  label: 'Okruszki dokumentacji',
  items: [{ label: 'Dokumentacja', href: '/docs' }, { label: 'Komponenty' }],
})

Propsy

Prop	Typ	Domyślnie	Opis
`items`	`Array`	`[]`	Ciągi znaków albo obiekty { label, href }. Ostatni to strona bieżąca.
`separator`	`Child`	`'/'`	Rysowany między elementami, ukryty przed czytnikami ekranu.
`label`	`string`	`'Breadcrumb'`	Dostępna nazwa punktu orientacyjnego nav.