Breadcrumb-Trails: Wayfinding, das funktioniert

Breadcrumbs sind klein, aber mächtig. Sie helfen Besuchern, zu verstehen, wo sie sind — und wie sie zurückgehen können. Eine einfache Navigationsidee, die großen Unterschied macht.

6 Min Lesedauer Anfänger März 2026

Breadcrumb-Pfad auf Website: Home > Kategorie > Unterkategorie > Seite

Was sind Breadcrumbs wirklich?

Stellen Sie sich vor, Sie sind in einem großen Kaufhaus. Es gibt mehrere Stockwerke, viele Abteilungen. Wie wissen Sie, wo Sie sind? Ein Schild zeigt Ihnen: “Damen > Oberbekleidung > Blusen”. Das ist exakt, was Breadcrumbs auf Websites tun. Sie zeigen den Pfad vom Anfang bis zu Ihrer aktuellen Position.

Die meisten Websites nutzen diese Navigations-Spur oben auf der Seite. Home > Kategorie > Unterkategorie > Aktuelle Seite. Einfach, klar, effektiv. Besucher verstehen sofort, wo sie sind. Und sie können jederzeit einen Schritt zurückgehen, ohne den Zurück-Button zu drücken.

Closeup einer Website mit sichtbarem Breadcrumb-Pfad in der Kopfzeile, moderne Interface-Gestaltung

Die richtige Struktur für Breadcrumbs

Es gibt drei Ansätze, wie Websites Breadcrumbs aufbauen. Der häufigste ist die Locations-basierte Variante: Sie zeigt die Hierarchie der Website. “Home > Blog > Design-Artikel > Aktuelle Seite”. Das funktioniert überall, egal wie tief Ihre Kategorien gehen.

Die zweite Methode ist Attribute-basiert. Sie zeigt Filter-Entscheidungen, die der Besucher getroffen hat. “Alle Produkte > Elektronik > Laptops > 15-Zoll > Gaming”. Das sehen Sie oft bei Online-Shops. Es hilft Besuchern zu verstehen, welche Filter aktiv sind.

Die dritte Variante ist History-basiert. Sie zeigt, welche Seiten der Besucher gerade besucht hat. Das ist am seltensten — und ehrlich? Am wenigsten hilfreich. Weil die History jedes Mal anders aussieht.

Drei verschiedene Website-Breadcrumb-Beispiele nebeneinander: Hierarchie, Filter-Attribute und Besucher-Chronologie

Detaillierte Ansicht eines gut gestalteten Breadcrumb-Elements mit klarer Typografie und intuitivem Layout

Design-Details, die zählen

Gutes Breadcrumb-Design ist unsichtbar. Das heißt nicht, dass es nicht existiert. Es heißt, dass es so natürlich wirkt, dass Besucher es ohne nachzudenken verstehen. Ein paar einfache Regeln helfen dabei.

Platzieren Sie Breadcrumbs oben auf der Seite, über dem Haupttitel. Der Abstand sollte klein sein — etwa 12-16 Pixel Padding. Die Schriftgröße? Kleiner als der normale Fließtext. 12-14 Pixel sind ideal. Sie wollen nicht, dass Breadcrumbs den Hauptinhalt konkurrenzieren.

Das Trennzeichen ist wichtig. Manche Designer nutzen “/”, andere “>”, manche “·”. Was funktioniert? Alle drei. Aber das “>” ist am intuitivsten — es zeigt Bewegung nach vorne. Ein Slash könnte leicht als Dateipath missverstanden werden.

Die letzte Seite — die aktuelle Seite — sollte NICHT klickbar sein. Sie ist ja bereits hier. Alle anderen Breadcrumbs sollten Links sein. Das ist der Standard, und Standards funktionieren, weil Besucher sie kennen.

Praktische Regeln für Breadcrumbs

Nicht zu tief verschachteln

Wenn Ihre Breadcrumb-Spur länger als 5 Ebenen ist, ist Ihre Navigation zu tief. Das ist kein Problem der Breadcrumbs — das ist ein Problem Ihrer Website-Struktur. Besucher sollten nie mehr als 3-4 Klicks von der Startseite entfernt sein.

Mobile Anpassungen

Auf mobilen Geräten haben Sie weniger Platz. Manche Designer verstecken Breadcrumbs komplett auf Handys. Das ist okay — aber nicht ideal. Besser: Zeigen Sie nur die aktuelle Kategorie und Home. Der Rest kann in einem Menü versteckt sein.

Links sind Standard

Nutzen Sie echte Links für alle Breadcrumbs außer der aktuellen Seite. Das hilft Suchmaschinen die Struktur Ihrer Website zu verstehen. Es hilft auch Besuchern — sie können mit mittlerem Mausklick einen Link in neuem Tab öffnen.

Sichtbar, aber subtil

Breadcrumbs sollten sichtbar sein, aber nicht dominant. Eine subtile Graufarbe funktioniert besser als eine helle Farbe. Sie sollten Besucher unterstützen, nicht von Ihrem Hauptinhalt ablenken.

Wo Breadcrumbs wirklich helfen

Amazon nutzt Breadcrumbs auf Produktseiten. “Alle Kategorien > Elektronik > Computer > Laptops > Gaming Laptops > Diese Seite”. Das ist lang, ja. Aber genau das ist der Punkt — Amazon hat viele Ebenen. Breadcrumbs zeigen, wo Sie sind, ohne Sie zu verwirren.

Wikipedia nutzt sie nicht. Warum? Weil Wikipedia eine flache Struktur hat. Die meisten Seiten sind Einträge auf gleicher Ebene. Es gibt keine tiefe Hierarchie. Für Wikipedia wären Breadcrumbs überflüssig.

News-Websites wie Der Spiegel oder Die Zeit nutzen sie sehr gut. “Startseite > Politik > Deutschland > Berlin > Diese Nachricht”. Das hilft Lesern zu verstehen, in welchem Kontext sie gerade sind. Und es ist hilfreich für Suchmaschinen.

E-Commerce-Sites wie zalando.de brauchen Breadcrumbs zwingend. Mit hunderten von Kategorien und Unterkategorien wären Besucher ohne Breadcrumbs ständig verloren. “Alle > Damen > Schuhe > Stiefel > Winterstiefel > Wasserdicht”. Klar, wo man ist.

Montage mehrerer bekannter Websites mit ihren Breadcrumb-Navigationslösungen, verschiedene Stile und Designs

Das Wichtigste zum Mitnehmen

Breadcrumbs sind nicht für alle Websites nötig. Aber für Websites mit mehr als 3-4 Navigationsebenen? Sie sind quasi unverzichtbar. Sie kosten fast nichts in der Implementierung. Sie benötigen minimal Platz. Und sie lösen ein echtes Problem: Besucher verlaufen sich weniger oft.

Die beste Nachricht: Breadcrumbs sind einfach zu bauen. Ein paar Links mit “/” oder “>” dazwischen. Das war’s. Kein kompliziertes JavaScript. Kein fancy Framework. Reines HTML. Das funktioniert auf jedem Gerät, in jedem Browser, für jeden Besucher.

Wenn Ihre Website eine klare Hierarchie hat — und Sie wollen, dass Besucher verstehen, wo sie sind — dann brauchen Sie Breadcrumbs. Nicht für Google, nicht für SEO-Punkte (obwohl das ein Bonus ist). Sondern für Ihre Besucher. Das ist gutes Design: einfach, nützlich, unsichtbar.

Mehr über Navigationsdesign erfahren