Breadcrumbs erleichtern uns die Bestimmung unserer Position auf einer Website und ermöglichen uns, wie der Name bereits impliziert (Deutsche Übersetzung: Brotkrümel), leichter wieder zurück zu vorherigen Elternseiten zu finden. Sie werden üblicherweise als eine Liste von Links nebeneinander dargestellt und starten mit der Startseite, bilden daraufhin alle hierarchisch folgenden Unterseiten ab und enden mit der Seite, auf der wir uns derzeit befinden. In den meisten Fällen werden sie durch einen Separator, wie einem Pfeil nach rechts oder eine Schrägstrich, voneinander getrennt, was die Hierarchie untermauert.
Vorteile für komplexe Systeme
Besonders große Websites mit umfangreichen Informationsarchitekturen profitieren von Breadcrumbs, da sie es Nutzer*innen beispielsweise erleichtern, schnell wieder zu einer Übersicht der Inhalte zu gelangen. Während es bei flachen Hierarchien sinnvoller wäre, die Zurück-Taste des Browsers zu nutzen, um eine Ebene weiter oben anzusteuern, kann es bei komplexen Systemen hilfreich sein, mehrere Ebenen mit einem Klick zu überspringen. Die Abbildung der Hierarchie in einem so simplen Schema macht das System außerdem leichter verständlich.
Ein Beispiel für solche komplexen Systeme sind Online-Shops. Sind wir beispielsweise auf der Suche nach neuen Badelatschen bei Amazon und würden in diesem fiktiven Szenario aus unerklärlichen Gründen die Suchfunktion nicht verwenden können, müsste wir uns in der Hierarchie durch diese Kategorien klicken:
Fashion › Herren › Schuhe › Sneaker & Sportschuhe › Sport- & Outdoorschuhe › Dusch- & Badeschuhe
Ein ziemlich langer Weg und selbst bei einem Online-Shop, der rein auf Kleidung spezialisiert ist, würden wir uns wahrscheinlich nur den ersten Punkt “Fashion” sparen können und hätten vergleichbar viele Klicks bis zum Ziel. An diesem Punkt sei außerdem anzumerken, dass wir Badelatschen nicht unbedingt unter “Sneaker & Sportschuhe” oder “Sport- & Outdoorschuhe” erwarten würden, aber das ist ein anderes Thema. Wenn wir nun merken, dass wir auch noch ein paar Stiefel brauchen, müssten wir mindestens bis zur Kategorie “Schuhe” zurück und hätten somit einen schnelleren Weg, als wenn wir dreimal die Zurück-Taste drücken oder uns erneut von der Startseite über “Fashion”, “Herren” und “Schuhe” zu den Stiefeln navigieren.
Viele Wege führen auf die Website
Neben dem Weg von der Startseite und dann über die Navigation gibt es viele weitere Wege, die Nutzer*innen potenziell auf eine Unterseite bringen können. Das können zum Beispiel Hyperlinks von anderen Websites oder Suchergebnisse bei Google sein. In diesem Fall sind diese Nutzer*innen nicht mit der Struktur, womöglich auch gar nicht mit dem eigentlichen Thema der Website vertraut. Es kann daher einen gewaltigen Vorteil mit sich bringen, wenn diese Besucher*innen über die Breadcrumbs einen schnellen Überblick darüber halten, welche Themen sie möglicherweise noch auf der Website finden können. Sie könnten in einer der übergeordneten Ebenen weiteren lesenswerten Inhalt finden und sich eine Ahnung entwickeln, wie die Hierarchie aufgebaut ist. Das Beispiel der Suche nach Badelatschen beschreibt ein solches Verhalten auch hier sehr treffend, da wir uns anhand der Breadcrumbs dazu entscheiden, uns nach neuen Stiefeln umzusehen.
Umsetzung von Breadcrumbs
Breadcrumbs dienen als Ergänzung zu einer guten globalen und lokalen Navigation und sollten diese nicht ersetzen. Sie sind lediglich eine alternative Form der Darstellung von Hierarchie, die zur einfachen Bestimmung der Position innerhalb dieser gedacht ist, weshalb sie auch genau diese Hierarchie abbilden sollten. Wenn wir beispielsweise über einen Hyperlink von einem Artikel auf der entsprechenden Unterseite landen, wird nicht dieser Artikel in den Breadcrumbs angezeigt, sondern die Hierarchie, in der sich diese befindet.
Breadcrumbs starten mit der Startseite und enden mit der Unterseite, auf der sich der/die Nutzer:in zu diesem Zeitpunkt befindet. Alle übergeordneten Elemente sind verlinkt, das derzeitige Element nicht. Wie bereits erwähnt, ist ein Separator nützlich, um anzuzeigen, dass sie eine Hierarchie abbildet. Breadcrumbs können für Websites mit flachen Hierarchien von ein bis zwei Ebenen verwendet werden, müssen es aber nicht, da sie besonders bei komplexen Informationssystemen von Vorteil sind.
Anpassung für mobile Geräte
Wenn sich die Unterseite tief in der Hierarchie befindet, kann eine Breadcrumb-Navigation sehr lang werden, was auf dem Desktop kein Problem darstellt, auf mobilen Geräten wiederum schnell zu verschwendeten Platz führen kann. Brechen die Breadcrumbs in mehr als fünf Zeilen um, ist die Überschrift der Seite womöglich gar nicht mehr sichtbar. Die Breadcrumbs einfach zu verkleinern, ist keine Option, da die Links auf mobilen Geräten eine möglichst große Klickfläche aufweisen sollten. Um Abhilfe zu schaffen, könnte weniger Ebenen der Hierarchie abgebildet werden, beispielsweise die zwei Ebenen, die sich über der derzeitigen Ebene befinden. Durch die Verwendung eines Icons für die Startseite kann ebenfalls etwas Platz gespart werden, da ein Haus-Symbol leicht mit Home bzw. der Startseite in Verbindung gebracht wird (Link: Labeling, Icons).
Zusammenfassung
Breadcrumbs ergänzen Navigationssysteme, ersetzen diese aber nicht. Sie bieten besonderen Mehrwert für komplexe Informationssysteme und Nutzer*innen, die über Umwege (beispielsweise externe Websites oder Google) auf eine Unterseite gelangen. Es ist wichtig, dass sie die korrekte Hierarchie abbilden, auch wenn über einen Hyperlink von einer anderen Unterseite auf die derzeitige Seite verlinkt wurde. Für mobile Geräte sollten alternative Darstellungsmethoden in Betracht gezogen werden, um nicht zu viel Platz für eine mehrzeilige Breadcrumb-Navigation aufzubringen.
Quellen
- Laubheimer, Page (23.12.2018). Breadcrumbs: 11 Design Guidelines for Desktop and Mobile. Nielsen Norman Group. Abgerufen am 22.08.2026.
- Wagner, Karin (31.08.2022). Breadcrumbs einfach erklärt. Seokratie GmbH. Abgerufen am 22.08.2026.
- Rosenfeld, Louis; Morville, Peter; Arango, Jorge (2015). Information Architecture: For the Web and Beyond. 4. Auflage. O’Reilly Media.