Breadcrumb-Navigation: wann eine Website sie braucht und wie man sie gestaltet

Eine Breadcrumb-Navigation ist die kurze Linkleiste, meist oben auf der Seite, die zeigt, wo eine Seite in der Struktur einer Website liegt, etwa Startseite > Schuhe > Laufschuhe. Mit einem Klick gelangen Besucher eine Ebene zurück. Eine Website braucht sie, sobald sie mehr als zwei Seitenebenen hat, etwa ein Onlineshop, eine umfangreiche Website mit vielen Leistungen oder eine Wissensdatenbank. Eine kleine, flache Website braucht sie meist nicht.

Zuletzt aktualisiert: 31. Oktober 2026.

Dieser Leitfaden erklärt die Arten von Breadcrumbs, wann sie helfen und wann sie stören, wie man sie für Desktop und Smartphone gestaltet, wie man sie barrierefrei macht, wie sie Suchmaschinen helfen und welche Fehler man vermeiden sollte. Er richtet sich an Marketingverantwortliche, Product Owner und Designer, die eine neue Website oder einen Relaunch planen.

Bei Odduel, einer Kreativ- und Technologieagentur in Barcelona und São Paulo, gestaltet unser Leistungsbereich UX/UI-Design die Navigation von Websites, Shops und Apps. Auf unserer eigenen Website enthält jeder Artikel und jede Fallstudie eine Breadcrumb-Spur in den Seitendaten, und jede Artikelseite hat einen sichtbaren Weg zurück zur Liste, von der man kam; die folgenden Hinweise stammen aus dieser Arbeit und gelten für jede Website.

Kurz gesagt: Setzen Sie Breadcrumbs ein, wenn Ihre Website drei oder mehr Ebenen hat und Besucher über die Suche tief einsteigen. Zeigen Sie den Ort in der Struktur, nicht den Verlauf des Besuchers; halten Sie die Spur kurz, in kleiner Schrift oben; machen Sie jede Ebene außer der aktuellen Seite zum Link; zeichnen Sie sie als Navigationsbereich für Screenreader und mit strukturierten Daten für Suchmaschinen aus. Zeigen Sie auf Smartphones die übergeordnete Ebene oder eine gekürzte Spur statt einer langen, umbrechenden Zeile.

Was ist eine Breadcrumb-Navigation?

Breadcrumbs sind eine ergänzende Navigationshilfe. Sie ersetzen das Hauptmenü nicht, sondern ergänzen es, indem sie zwei Fragen eines Besuchers beantworten, der auf einer Seite landet: Wo bin ich, und wie komme ich zum übergeordneten Bereich? Der Name stammt von der Brotkrumenspur aus dem Märchen, doch anders als diese zeigt eine gute Breadcrumb-Spur die Struktur der Website und nicht den Weg, den ein Besucher zufällig genommen hat.

Eine typische Breadcrumb-Spur steht über der Seitenüberschrift, nutzt kleine Schrift, trennt die Ebenen mit einem Zeichen wie > oder / und endet mit der aktuellen Seite, die kein Link ist.

Welche Arten von Breadcrumbs gibt es?

Die Tabelle vergleicht die drei üblichen Arten.

Art	Was sie zeigt	Beispiel	Am besten für	Worauf achten
Ortsbasiert	Wo die Seite in der Struktur der Website steht	Startseite > Leistungen > Branding	Die meisten Websites, Dienstleistungswebsites, Wissensdatenbanken	Seiten, die in mehreren Bereichen stehen
Attributbasiert	Die Merkmale oder Filter, die die Seite definieren	Startseite > Schuhe > Damen > Größe 38	Shops mit Filtern und facettierter Navigation	Lange Spuren und doppelte Adressen
Verlaufsbasiert	Die Seiten, die der Besucher gerade angesehen hat	Zurück zu den Ergebnissen	Suchergebnisse und gefilterte Listen	Doppelung der Zurück-Taste des Browsers

Die meisten Websites sollten ortsbasierte Breadcrumbs nutzen. Attributbasierte Spuren helfen in Shops, solange Filterkombinationen keine endlosen Adressen erzeugen, die Suchmaschinen crawlen müssen. Verlaufsbasierte Links wie „Zurück zu den Ergebnissen“ sind auf einer Produktseite nützlich, die man über eine Suche erreicht, aber sie sind ein anderes Werkzeug als eine Breadcrumb-Spur.

Wann braucht eine Website Breadcrumbs?

Breadcrumbs verdienen ihren Platz, wenn die Struktur so tief ist, dass Besucher die Orientierung verlieren könnten.

• Onlineshops mit Kategorien und Unterkategorien, bei denen Besucher oft über die Suche direkt auf einer Produktseite landen.
• Dienstleistungswebsites mit vielen Leistungen, gruppiert nach Bereichen.
• Wissensdatenbanken, Dokumentationen und Hilfecenter mit verschachtelten Themen.
• Blogs und Magazine mit Kategorien, in denen Breadcrumbs einen Artikel mit seiner Rubrik verbinden.
• Große Unternehmens- oder Behördenwebsites mit mehreren Seitenebenen.

Wenig bringen sie auf kleinen, flachen Websites mit wenigen Seiten, auf Onepagern und auf Landingpages, die um eine einzige Handlung gebaut sind, wo eine Linkspur vom Ziel ablenken kann. Wie sich Navigation in den gesamten Designprozess einfügt, zeigt unser Leitfaden zum UX/UI-Design.

Wie gestaltet man Breadcrumbs?

Gute Breadcrumbs findet man leicht, wenn man sie braucht, und übersieht sie leicht, wenn nicht.

• Platzieren Sie sie oben, über der Seitenüberschrift und unter der Hauptnavigation, auf jeder Seite an derselben Stelle.
• Halten Sie sie klein und zurückhaltend, kleiner als den Fließtext, damit sie nicht mit der Überschrift konkurrieren.
• Machen Sie jede Ebene zum Link außer der letzten. Die aktuelle Seite erscheint als Text, damit Besucher verstehen, wo sie sind.
• Nutzen Sie klare Trennzeichen, etwa >, / oder einen kleinen Winkel, mit genug Abstand.
• Nutzen Sie die echten Seitennamen, bei Bedarf gekürzt, damit die Spur zu Menü und Überschriften passt.
• Beginnen Sie mit der Startseite, oder mit dem obersten Bereich, wenn das Logo bereits zur Startseite führt und der Platz knapp ist.
• Ein Pfad pro Seite. Gehört ein Produkt zu mehreren Kategorien, wählen Sie eine Hauptkategorie für die Spur.

Testen Sie die Spur mit Menschen, die die Website nicht kennen. Bitten Sie sie, ein Produkt oder einen Artikel zu finden und dann den zugehörigen Bereich zu erreichen, und beobachten Sie, ob sie die Breadcrumbs, das Menü oder die Zurück-Taste nutzen. Bemerkt niemand die Spur, ist sie vielleicht zu blass; werden die Ebenen missverstanden, müssen Seitennamen oder Struktur überarbeitet werden, nicht die Breadcrumbs selbst.

Wie funktionieren Breadcrumbs auf dem Smartphone?

Lange Spuren brechen auf kleinen Bildschirmen schlecht um und drücken die Überschrift nach unten. Übliche Lösungen:

• Nur die übergeordnete Ebene zeigen, als einzelnen Link „zurück zum Bereich“ mit Pfeil.
• Die Mitte kürzen bei langen Spuren und die erste und letzte Ebene behalten.
• Die Spur seitlich scrollen lassen in einer Zeile, wenn sie vollständig bleiben muss.

Welche Lösung Sie auch wählen: Halten Sie die Tippflächen groß genug und testen Sie auf echten Smartphones.

Wie sollten Onlineshops Breadcrumbs einsetzen?

In Shops zählen Breadcrumbs am meisten, weil die Produktseite oft die erste Seite ist, die Kunden sehen. Wer über eine Suche auf einem einzelnen Paar Laufschuhe landet, will schnell den Rest des Sortiments sehen, und eine Spur wie Startseite > Schuhe > Laufschuhe macht das mit einem Tippen möglich.

• Wählen Sie eine Hauptkategorie pro Produkt, damit die Spur überall gleich ist, wo das Produkt erscheint.
• Lassen Sie Filter aus der Spur heraus, außer die gefilterte Seite ist eine echte, indexierbare Kategorie mit eigenen Inhalten.
• Kombinieren Sie die Spur mit einem Link „zurück zu den Ergebnissen“, wenn Besucher aus einer Suche oder einer gefilterten Liste kommen, damit sie genau dorthin zurückfinden.

Unser Leitfaden zu Onlineshop-Funktionen behandelt die weiteren Navigationselemente, die ein Shop ab dem ersten Tag braucht.

Wie macht man Breadcrumbs barrierefrei?

Breadcrumbs sollten mit Screenreader oder Tastatur genauso nutzbar sein wie mit der Maus. Das Breadcrumb-Muster des W3C beschreibt das übliche Markup:

• Ein Navigationsbereich (ein nav-Element) mit einer Beschriftung wie „Breadcrumb“, damit Screenreader-Nutzer ihn finden und überspringen können.
• Eine geordnete Liste von Links, die die Reihenfolge der Ebenen vermittelt.
• Die aktuelle Seite gekennzeichnet mit dem Attribut aria-current und dem Wert page, damit sie als aktueller Ort angesagt wird.
• Trennzeichen per CSS gezeichnet statt als Zeichen getippt, damit sie nicht bei jeder Ebene vorgelesen werden.
• Ausreichender Kontrast und sichtbarer Fokus für die kleine Schrift und die Links.

Unser Leitfaden zur Barrierefreiheit von Websites behandelt die weiteren Anforderungen, die in Europa gelten.

Helfen Breadcrumbs bei der SEO?

Breadcrumbs helfen Suchmaschinen auf zwei Wegen. Ihre Links sind interne Links, die Crawlern zeigen, wie Seiten zu ihren Bereichen gehören. Und strukturierte Daten, die die Spur mit dem Typ BreadcrumbList beschreiben, helfen Suchmaschinen, die Hierarchie zu verstehen, und lassen sie in manchen Ergebnissen den Pfad statt einer reinen Adresse anzeigen; Google beschreibt das Format in seiner Anleitung zu strukturierten Daten für Breadcrumbs.

Damit das funktioniert, sollte die Spur eine klare Struktur abbilden und zu den Adressen passen. Unser Artikel zu SEO-freundlichen URLs erklärt, wie Adressen und Struktur sich gegenseitig stützen. Auf mehrsprachigen Websites sollte jede Sprachversion eigene Namen und Adressen in der Spur haben.

Was sind die häufigsten Breadcrumb-Fehler?

• Breadcrumbs als Hauptnavigation nutzen. Sie ergänzen das Menü; sie ersetzen es nicht.
• Verlauf statt Ort zeigen. Das wiederholt die Zurück-Taste und verwirrt alle, die über die Suche kommen.
• Die aktuelle Seite verlinken. Ein Link auf die Seite, auf der man ist, ist eine Sackgasse.
• Spuren, die nicht zum Menü passen. Unterschiedliche Namen für denselben Bereich in Menü und Breadcrumbs.
• Breadcrumbs auf flachen Websites. Eine Spur Startseite > Seite bringt nichts.
• Zu klein oder zu kontrastarm. Breadcrumbs, die auf dem Smartphone schwer zu lesen oder anzutippen sind.
• Keine strukturierten Daten, oder Daten, die nicht zur sichtbaren Spur passen.

Wenn Sie eine bestehende Website prüfen, enthält unsere UX-Audit-Checkliste neben Breadcrumbs weitere Navigationsprüfungen.

Häufige Fragen zur Agenturwahl

Breadcrumbs sind ein kleines Detail, das sich auf jeder Website mit Tiefe auszahlt: Sie geben Besuchern Orientierung, unterstützen die Barrierefreiheit und helfen Suchmaschinen, Ihre Struktur zu lesen. Sehen Sie, wie unser Leistungsbereich UX/UI-Design Navigation gestaltet, oder erzählen Sie uns von Ihrem Projekt, und wir prüfen, wie sich Besucher auf Ihrer Website zurechtfinden.