Breadcrumbs

Breadcrumbs sagen, wo eine Seite sitzt. Der letzte Eintrag ist die aktuelle Seite: er wird als reiner Text gerendert und mit aria-current="page" markiert, denn ein Link auf die Seite, auf der man schon ist, ist Rauschen.

Einfache Breadcrumbs

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

Trennzeichen

Beliebiger String oder Markup. Die Trennzeichen bleiben in jedem Fall vor Screenreadern verborgen.

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

Einfache Strings

Ein Eintrag ohne href ist nur Text, wo immer er steht — nicht nur am Ende.

breadcrumbs({
  items: ['Start', 'Archiv', '2026', 'März'],
})

Aus einem Pfad

Auf einer statischen Website wird die Spur meist aus der Route abgeleitet, nicht von Hand geschrieben.

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('/'),
      })),
    ],
  })
})()

Das nav beschriften

Das Ganze ist ein <nav> mit zugänglichem Namen, sodass ein Screenreader dorthin springen kann. Ändere den Namen mit label, wenn eine Seite mehr als einen Navigations-Landmark hat.

breadcrumbs({
  label: 'Breadcrumb der Dokumentation',
  items: [{ label: 'Doku', href: '/docs' }, { label: 'Komponenten' }],
})

Props

Prop	Typ	Standard	Beschreibung
`items`	`Array`	`[]`	Strings oder { label, href }-Objekte. Der letzte ist die aktuelle Seite.
`separator`	`Child`	`'/'`	Wird zwischen den Einträgen gezeichnet, vor Screenreadern verborgen.
`label`	`string`	`'Breadcrumb'`	Zugänglicher Name des nav-Landmarks.