Breadcrumb Navigation – auf Deutsch Brotkrümelnavigation – ist ein sekundäres Navigationselement, das Nutzern ihren aktuellen Standort innerhalb der Website-Hierarchie anzeigt. Der Name leitet sich von Hänsel und Gretel ab, die Brotkrümel im Wald streuten, um den Rückweg zu finden.
Arten von Breadcrumbs
Hierarchische Breadcrumbs
Die häufigste Form: Sie zeigen den Pfad von der Startseite bis zur aktuellen Seite entlang der Seitenhierarchie. Beispiel: Startseite > Leistungen > Webdesign > Responsive Design
Attribut-basierte Breadcrumbs
Zeigen Eigenschaften der aktuellen Seite statt den hierarchischen Pfad. Häufig in E-Commerce-Shops. Beispiel: Smartphones > Samsung > 5G > Unter 500€
Verlauf-basierte Breadcrumbs
Zeigen die zuletzt besuchten Seiten – ähnlich der Browser-Chronik. Heute selten verwendet, da der Browser-Zurück-Button diese Funktion abdeckt.
Vorteile für die User Experience
Breadcrumbs verbessern die Orientierung erheblich. Nutzer erkennen sofort, wo sie sich befinden und wie die Seite in die Gesamtstruktur eingebettet ist. Das reduziert die Absprungrate und fördert die Navigation zu übergeordneten Kategorien.
Die Informationsarchitektur wird für Nutzer sichtbar und nachvollziehbar. In Kombination mit einem durchdachten User Flow ermöglichen Breadcrumbs effiziente Navigation ohne Umwege.
Breadcrumbs und SEO
Für die Suchmaschinenoptimierung sind Breadcrumbs doppelt wertvoll:
- Interne Verlinkung: Jede Breadcrumb-Stufe ist ein Link, der die interne Verlinkungsstruktur stärkt
- Strukturierte Daten: Mit Schema.org-Markup erscheinen Breadcrumbs als Rich Snippets in den Suchergebnissen
- Crawling: Suchmaschinen verstehen die Seitenhierarchie besser
Google zeigt Breadcrumbs häufig anstelle der URL in den Suchergebnissen an – das verbessert die Klickrate und das Nutzerverständnis.
Best Practices für Breadcrumbs
- Position: Oben auf der Seite, unterhalb der Hauptnavigation
- Trennzeichen: Pfeilsymbole (>) oder Schrägstriche (/) zwischen den Stufen
- Aktuelle Seite: Nicht verlinkt, visuell abgesetzt
- Barrierefreiheit: Als
<nav aria-label="Breadcrumb">auszeichnen - Responsive: Auf mobilen Geräten ggf. gekürzt darstellen
Implementierung in Next.js
In Next.js-Projekten lassen sich Breadcrumbs automatisch aus der URL-Struktur generieren. Eine Breadcrumb-Komponente liest den aktuellen Pfad aus und erstellt daraus die hierarchische Navigation – inklusive Schema.org JSON-LD für die Suchmaschinen.
Für professionelles Webdesign sind Breadcrumbs ein kleines Element mit großer Wirkung auf Nutzerfreundlichkeit und Sichtbarkeit in Suchmaschinen.