Breadcrumbs sind kein dekoratives Extra, sondern ein Orientierungselement für komplexere Websites. Sie zeigen, wo sich Nutzer:innen innerhalb der Informationsarchitektur befinden, und entlasten Navigation, Suchverhalten und Zurück-Button. Gut gestaltet stärken sie Orientierung, Hierarchie und Bedienbarkeit, schlecht gestaltet erzeugen sie dagegen nur zusätzliche Unruhe.
Wann Breadcrumbs im Webdesign sinnvoll sind
Breadcrumb-Navigation ist vor allem dann sinnvoll, wenn eine Website mehrere Ebenen, Kategorien oder Inhaltszweige hat. Auf kleinen Onepagern oder sehr flachen Seitenstrukturen bringen Breadcrumbs meist keinen Mehrwert, weil die aktuelle Position auch ohne Zusatznavigation klar bleibt.
Besonders nützlich sind Breadcrumbs bei Shops, Magazinen, Wissensdatenbanken, größeren Unternehmensseiten und Portalen mit Unterbereichen. Dort bewegen sich Nutzer:innen nicht nur linear von oben nach unten, sondern springen zwischen Kategorien, Listen, Detailseiten und verwandten Inhalten. Breadcrumbs schaffen in solchen Fällen einen schnellen mentalen Lageplan.
Wichtig ist: Breadcrumbs ersetzen keine Hauptnavigation. Sie sind eine ergänzende Sekundärnavigation. Wenn die Seitenstruktur bereits in Menü, Seitentitel und Kontextblöcken unklar ist, lösen Breadcrumbs das Grundproblem nicht. Dann muss zuerst die Informationsarchitektur überarbeitet werden, etwa mit klarerer Benennung oder einer besseren Menüstruktur.
Für KMU-Websites gilt eine einfache Regel: Je mehr Unterseiten in Themenclustern organisiert sind, desto eher lohnen sich Breadcrumbs. Auf einer kleinen Startseite mit Leistungen, Über-uns und Kontakt eher nicht. Bei Leistungsseiten mit Unterkategorien, Blogarchiven oder Case-Studies dagegen oft schon.
- Prüfe zuerst die Tiefe der Seitenstruktur statt pauschal Breadcrumbs einzubauen.
- Nutze Breadcrumbs nur, wenn sie echte Orientierung liefern.
- Setze sie ergänzend zur Hauptnavigation ein, nicht als Ersatz.
- Vermeide Breadcrumbs auf sehr kurzen, flachen Websites ohne Ebenenlogik.
Welche Arten von Breadcrumbs gibt es überhaupt?
Es gibt nicht nur eine Form von Breadcrumbs. Für Websites mit sauberer Struktur sind hierarchische Pfade fast immer die beste Wahl, weil sie die inhaltliche Einordnung abbilden und nicht bloß den letzten Klickweg.
Am häufigsten sind hierarchische Breadcrumbs wie Startseite > Leistungen > Webdesign. Sie zeigen die Position innerhalb der Seitenlogik und helfen beim Zurückspringen in übergeordnete Bereiche. Das ist für Nutzer:innen meist verständlicher als verlaufsbasierte Varianten.
Verlaufsbasierte Breadcrumbs bilden den tatsächlichen Klickpfad ab. Das kann in Spezialfällen sinnvoll sein, etwa in Anwendungen oder Filternavigationen, ist auf klassischen Websites aber oft unzuverlässig. Wer über Suche, internen Link oder externen Einstieg kommt, erhält sonst uneinheitliche Wege.
Daneben gibt es attributbasierte Breadcrumbs, vor allem im E-Commerce. Beispiele wären Produktpfade über Merkmale wie Marke, Größe oder Material. Diese Form kann nützlich sein, wenn Kategoriesysteme stark filtergetrieben sind. Im Interface muss dann aber klar bleiben, ob ein Element eine feste Kategorie oder nur einen gesetzten Filter darstellt.
| Typ | Einsatz | Vorteil | Risiko |
|---|---|---|---|
| Hierarchisch | Content-Seiten, Shops, Magazine | Klare Einordnung | Nur gut bei sauberer Struktur |
| Verlaufsbasiert | Apps, spezielle User-Flows | Spiegelt den Weg wider | Kann inkonsistent sein |
| Attributbasiert | Filterlastige Shops | Hilft bei Produktkontext | Kann Kategorien und Filter vermischen |
Für die meisten Webdesign-Projekte ist der hierarchische Ansatz die sicherste Lösung. Er ist leichter verständlich, besser wartbar und konsistenter über verschiedene Einstiege hinweg.
So gestalten Breadcrumbs visuell klar und unaufdringlich
Breadcrumbs müssen sichtbar sein, aber sie dürfen nicht mit der Hauptnavigation konkurrieren. Gute Gestaltung bedeutet hier Zurückhaltung: kleine, gut lesbare Typografie, ausreichender Kontrast und eine Position, die logisch vor der Hauptüberschrift liegt.
Typisch ist die Platzierung direkt unter dem Header und oberhalb des Seitentitels. So erscheinen Breadcrumbs früh genug, um Orientierung zu geben, ohne den eigentlichen Inhalt zu verdrängen. Gerade auf Inhaltsseiten mit vielen Unterebenen ist das sauberer als eine Position im Fließtext.
Visuell funktionieren Breadcrumbs am besten mit klaren Trennzeichen, etwa >, / oder einem dezenten Chevron-Icon. Entscheidend ist weniger das Symbol als die Lesbarkeit der Kette. Zu enge Abstände, zu schwacher Kontrast oder winzige Schrift machen das Element praktisch wertlos. Für Kontraste sollten die Anforderungen aus WCAG 2.2 mitgedacht werden, gerade wenn Breadcrumbs in hellgrauen UI-Zonen sitzen.
Auch die Beschriftung verdient Aufmerksamkeit. Kurze, verständliche Begriffe schlagen interne CMS-Namen oder zu lange Seitentitel. Wenn eine Seite offiziell „Digitale Lösungen für mittelständische Dienstleistungsunternehmen“ heißt, muss dieser Wortlaut nicht komplett im Breadcrumb landen. Kürzere Labels verbessern Scanbarkeit und sparen Platz.
Wer an der visuellen Ordnung der Seite arbeitet, profitiert oft zusätzlich von sauberer Blickführung, weil Breadcrumbs nur dann nützlich bleiben, wenn Header, Titel und Content nicht gegeneinander arbeiten.
- Setze Breadcrumbs oberhalb der H1 und unterhalb des Headers.
- Wähle kurze Labels statt interner Seitennamen.
- Nutze ausreichenden Kontrast und keine zu feine Schrift.
- Halte Trennzeichen dezent, aber klar erkennbar.
- Gib dem aktiven letzten Element eine andere visuelle Rolle als den klickbaren Stationen.
Wie bleiben Breadcrumbs barrierefrei und technisch sauber?
Barrierefreiheit bei Breadcrumbs ist kein Detail, sondern Voraussetzung für verlässliche Nutzung. Screenreader, Tastaturnavigation und klare Zustände sorgen dafür, dass das Element nicht nur sichtbar, sondern auch sinnvoll bedienbar bleibt.
Semantisch sollten Breadcrumbs in ein nav-Element mit passender Kennzeichnung eingebettet werden. In HTML ist außerdem eine Liste sinnvoll, weil sie die Abfolge der Navigation klar strukturiert. Das aktuelle Element sollte als gegenwärtige Position erkennbar sein und nicht unnötig verlinkt werden.
Für die visuelle Gestaltung heißt das: Links brauchen erkennbare Fokuszustände, nicht nur Hover-Effekte. Gerade auf Touch-Geräten fällt Hover weg, und für Tastaturnutzer:innen ist ein sichtbarer Fokus unverzichtbar. Außerdem sollte das letzte Element als aktuelle Seite klar ausgezeichnet sein, damit keine falsche Erwartung an einen Klick entsteht.
Ein minimalistisches Grundgerüst kann so aussehen:
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Startseite</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">Breadcrumb-Navigation</li>
</ol>
</nav>Auch in visuellen Buildern wie Webflow oder WordPress mit Elementor lohnt es sich, die Ausgabe im Frontend zu prüfen. Nicht jedes Widget erzeugt automatisch eine saubere Struktur. Wer das Thema systematisch angeht, sollte zusätzlich zugängliche Gestaltung mitdenken, damit Orientierung nicht nur optisch funktioniert.
Was gilt für mobile Breadcrumbs und kleine Displays?
Auf kleinen Screens müssen Breadcrumbs kompakter werden, aber nicht verschwinden. Gerade mobil fehlt oft der räumliche Überblick, deshalb ist eine reduzierte, gut priorisierte Darstellung meist hilfreicher als ein kompletter Verzicht.
Das Hauptproblem auf Smartphones ist Platz. Lange Ebenenketten brechen schnell um und erzeugen mehrere Zeilen, die vor dem Inhalt unnötig Raum einnehmen. Deshalb sollten Labels kurz gehalten und unnötige Zwischenebenen vermieden werden. In manchen Fällen reicht mobil eine gekürzte Form, etwa mit Auslassung mittlerer Stationen.
Eine weitere Möglichkeit ist horizontales Scrollen innerhalb des Breadcrumb-Bereichs. Das funktioniert aber nur, wenn klar erkennbar ist, dass mehr Inhalt vorhanden ist, und wenn die Bedienung nicht hakelig wird. Für viele Websites ist eine intelligent verkürzte Hierarchie die robustere Lösung.
Wichtig ist außerdem der Abstand zu anderen Navigationselementen. Wenn Burger-Menü, Seitentitel, Tabs und Breadcrumbs direkt übereinander liegen, entsteht schnell visuelle Dichte. Hier hilft oft das gleiche Prinzip wie bei ruhigen Zwischenräumen: lieber wenige, klar priorisierte Elemente als alles gleichzeitig sichtbar machen.
Auch technisch sollte mobil sauber getestet werden. Zeilenumbrüche, abgeschnittene Begriffe und zu kleine Tap-Flächen fallen oft erst im realen Gerät auf, nicht in der Desktop-Vorschau eines Design-Tools.
Welche Fehler machen Breadcrumbs wirkungslos?
Breadcrumbs scheitern selten an ihrer Idee, sondern an ihrer Umsetzung. Die häufigsten Probleme sind doppelte Orientierung, unklare Benennung und eine Struktur, die nicht zur tatsächlichen Website-Logik passt.
Ein klassischer Fehler ist der Einbau auf Seiten, die keine echte Hierarchie haben. Dann erscheinen Breadcrumbs nur deshalb, weil das Theme sie vorsieht. Nutzer:innen lesen eine Kette, die ihnen nichts erklärt, und das Interface wird unnötig voller.
Ebenfalls problematisch sind zu technische oder wechselnde Begriffe. Wenn im Menü „Leistungen“ steht, im Breadcrumb aber „Services“ und in der URL noch etwas Drittes, verliert das System an Vertrauen. Konsistente Benennung wirkt klein, hat aber große Wirkung auf Verständlichkeit und Wiedererkennung.
Auch visuelle Schwäche ist ein häufiger Grund für Nutzlosigkeit. Hellgraue Schrift auf fast weißem Hintergrund, extrem kleine Größen oder Trennzeichen ohne Abstand machen Breadcrumbs praktisch unsichtbar. Das betrifft nicht nur Ästhetik, sondern direkt die Informationsarchitektur, weil ein eigentlich hilfreiches Orientierungselement nicht mehr wahrgenommen wird.
Zum Schluss lohnt ein Blick auf reale Nutzung: Wenn Nutzer:innen trotz Breadcrumbs häufig abspringen, falsch navigieren oder oft den Browser-Zurück-Button verwenden, sollte die Struktur überprüft werden. Breadcrumbs sind nur dann stark, wenn die zugrunde liegende Seitenlogik wirklich verständlich ist.
Wie viele Ebenen sollte ein Breadcrumb zeigen?
So viele wie nötig, so wenige wie möglich. Drei bis fünf Stationen sind auf vielen Websites gut lesbar. Wenn deutlich mehr Ebenen nötig sind, ist das oft ein Signal, die Seitenstruktur zu prüfen oder Zwischenebenen zusammenzufassen.
Soll das letzte Breadcrumb-Element klickbar sein?
In den meisten Fällen nein. Das letzte Element markiert die aktuelle Seite und sollte als solche erkennbar sein. Ein Link auf dieselbe Seite erzeugt meist keinen Nutzen und kann für assistive Technologien unnötig redundant sein.
Brauchen kleine Unternehmenswebsites überhaupt Breadcrumbs?
Nicht automatisch. Bei flachen Strukturen mit wenigen Menüpunkten sind Breadcrumbs oft überflüssig. Sie werden erst dann sinnvoll, wenn Inhalte in klaren Bereichen, Unterseiten oder Kategorien organisiert sind.
Breadcrumbs funktionieren dann gut, wenn sie eine echte Struktur sichtbar machen und nicht nur ein Theme-Feature füllen. Sie verbessern Orientierung vor allem auf Websites mit mehreren Ebenen, klaren Kategorien und vielen Detailseiten. Entscheidend sind saubere Benennung, gute Lesbarkeit und barrierefreie Umsetzung. Wo die Seitenlogik schon unklar ist, sollten Breadcrumbs nicht kaschieren, sondern erst nach einer besseren Struktur eingesetzt werden.
