Breadcrumbs

Navigationspfad zur Orientierung innerhalb der Seitenhierarchie. Generiert automatisch Schema.org JSON-LD Markup für Suchmaschinen. Das letzte Element wird als aktuelle Seite markiert (aria-current="page").

Einfache Breadcrumb

2 Ebenen

<Breadcrumbs items={[
  { label: 'Startseite', href: '/' },
  { label: 'Kontakt' },
]} />

Mehrere Ebenen

3 Ebenen

<Breadcrumbs items={[
  { label: 'Startseite', href: '/' },
  { label: 'Produkte', href: '/produkte' },
  { label: 'Zubehör' },
]} />

Tiefe Verschachtelung

5 Ebenen

<Breadcrumbs items={[
  { label: 'Startseite', href: '/' },
  { label: 'Shop', href: '/shop' },
  { label: 'Elektronik', href: '/shop/elektronik' },
  { label: 'Smartphones', href: '/shop/elektronik/smartphones' },
  { label: 'iPhone 16 Pro' },
]} />

Installation

cp-components add breadcrumbs