Bread­crumb-Na­vi­ga­ti­on: Welche Vorteile bietet sie?

Die Bread­crumb-Na­vi­ga­ti­on (deutsch: „Brot­krü­mel­na­vi­ga­ti­on“) ist ein wichtiges Element der Be­nut­zer­füh­rung auf Websites und Apps. Sie hilft Nut­ze­rin­nen und Nutzern, ihre aktuelle Position innerhalb der Sei­ten­struk­tur zu erkennen und schnell zu über­ge­ord­ne­ten Ebenen zu­rück­zu­keh­ren.

Was ist eine Bread­crumb-Na­vi­ga­ti­on?

Wer erinnert sich nicht an das bekannte grimmsche Märchen „Hänsel und Gretel“? Zwei in einem Wald aus­ge­setz­te Ge­schwis­ter streuen hinter sich Brot­krü­mel aus, um den Weg zurück nach Hause zu finden. Die Kinder geraten in die Fänge einer men­schen­fres­sen­den Hexe, können aber ent­flie­hen und aus dem Wald her­aus­fin­den. Was dieses düstere Märchen mit Webdesign zu tun hat? Ganz einfach: Auch das World Wide Web und ins­be­son­de­re komplexe Websites er­schei­nen wie ein großer dunkler Wald. Bei der Na­vi­ga­ti­on durch um­fang­rei­che On­line­shops oder weit­ver­zweig­te Web­por­ta­le wünscht man sich als verirrter User mitunter ebenfalls Brot­krü­mel, um den un­kom­pli­zier­ten Weg zurück auf über­ge­ord­ne­te Seiten zu finden.

Die Bread­crumb-Na­vi­ga­ti­on ist ein se­kun­dä­res Na­vi­ga­ti­ons­ele­ment, das un­ter­stüt­zend zu den klas­si­schen Menüs im oberen Bereich einer Website ein­ge­setzt wird. Sie er­mög­licht Nut­ze­rin­nen und Nutzern in mehr­fa­cher Hinsicht eine bessere Ori­en­tie­rung: Zum einen ist für den User mit einer Brot­krü­mel­na­vi­ga­ti­on immer erkennbar, wo auf der Website er oder sie sich gerade befindet, und zum anderen zeigt sie ty­pi­scher­wei­se auch an, welcher Weg zu den über­ge­ord­ne­ten Bereichen führt. Der so­ge­nann­te Bread­crumb-Trail (deutsch: „Brot­krü­mel-Pfad“) stellt die einzelnen Stationen logisch auf­ein­an­der­fol­gend und üb­li­cher­wei­se hier­ar­chisch ge­glie­dert dar. User bewegen sich von der Start­sei­te über die Ka­te­go­rie­sei­ten zu den konkreten Inhalten. Der Bread­crumb-Trail bietet Links zu all diesen Stationen an. So können Nut­ze­rin­nen und Nutzer die Struktur der Website nach­voll­zie­hen und mit nur einem Klick zu­rück­sprin­gen.

Arten von Bread­crumb-Na­vi­ga­ti­on

Die Bread­crumbs auf Websites erfüllen also die gleiche Funktion wie die Brot­krü­mel in der Mär­chen­vor­la­ge – mit der ent­schei­den­den Ausnahme, dass sie nicht von Vögeln weg­ge­pickt werden können, was Hänsel und Gretel im Märchen den Rückweg erschwert. Die Dar­stel­lung einer Bread­crumb-Na­vi­ga­ti­on variiert: Ver­brei­tet sind Pfeil­sym­bo­le oder das Größer-als-Zeichen (>), die als Trenn­zei­chen fungieren und zugleich die Hier­ar­chie der Website abbilden. Häufig werden auch grafische Buttons in Pfeilform verwendet. So ergibt sich in der Regel ein Pfad, der ungefähr folgendem Schema ent­spricht:

Startseite > Kategorie > Aktuelle Position

Auf besonders komplexen Seiten gibt es häufig noch weitere Ka­te­go­rien und Sub­ka­te­go­rien zwischen der Start­sei­te und der aktuellen Position. Eine Bread­crumb-Na­vi­ga­ti­on nach obigem Schema wird auch Location-Bread­crumb genannt, da die Position und der Weg zur Start­sei­te dar­ge­stellt werden. Eine weitere, aber seltenere Dar­stel­lungs­va­ri­an­te ist der Path-Bread­crumb, der statt auf die Location den Fokus auf den tat­säch­li­chen Klickpfad legt, was bei komplexen Seiten schnell ver­wir­rend sein kann. Der Path-Bread­crumb bildet das Surf­ver­hal­ten des Anwenders oder der An­wen­de­rin auf der Site ab – ganz gleich, wie sprung­haft selbiges ist. Diese Variante könnte wie folgt aussehen:

Startseite > Kategorie 1 > Startseite > Kategorie 3 > Kategorie 2 > Startseite

Eine dritte Variante bilden die kategorie- oder at­tri­but­ba­sier­ten Bread­crumbs: Diese findet man häufig im E-Commerce-Bereich und vor allem bei On­line­shops. Sie zeigen dem An­wen­den­den die Ka­te­go­rie­zu­ge­hö­rig­keit der aktuell ge­öff­ne­ten Seite und die zu­ge­schrie­be­nen Attribute an. Ermittelt werden selbige anhand von Me­ta­in­for­ma­tio­nen. Eine Jeans gehört bei­spiels­wei­se zur Kategorie der Hosen, kann gleich­zei­tig aber auch die Attribute „Blau“ und „Größe 32“ tragen:

Startseite > Bekleidung > Herren > Hosen > Jeans > Blau > Größe 32

Bread­crumb-Na­vi­ga­ti­on und Usability

Manch einer mag sich jetzt fragen, wozu eine Bread­crumb-Na­vi­ga­ti­on überhaupt gut sein soll – immerhin hat man ja auch Me­nü­leis­ten, über die die Na­vi­ga­ti­on abläuft. Zudem verfügt jeder gängige Browser über Buttons zum Vor- und Zu­rück­blät­tern. Diese Elemente machen die Na­vi­ga­ti­on zwar möglich, sind aber in einigen Fällen sehr um­ständ­lich und kom­pli­ziert.

Eine der wich­tigs­ten Regeln für ein gutes User-Ex­pe­ri­ence-Design lautet: Je weniger Klicks Nut­ze­rin­nen und Nutzer benötigen, desto besser fällt die User Ex­pe­ri­ence aus. Dieser Grundsatz gilt ins­be­son­de­re für die Na­vi­ga­ti­on. Es gibt kaum etwas Ner­vi­ge­res, als beim Zu­rück­sprin­gen ständig auf den „Zurück“-Pfeil im Browser klicken oder eine Kategorie in der Me­nü­leis­te von Neuem durch­fors­ten zu müssen. Darüber hinaus wissen User dank Bread­crumbs stets, wo sie sich auf der Website befinden: Die Hier­ar­chie und Struktur der Seite ist mit einer Bread­crumb-Na­vi­ga­ti­on deutlich trans­pa­ren­ter als mit einer sin­gu­lä­ren Menü-Na­vi­ga­ti­on.

Selbst wenn die Nutzenden über einen externen oder internen Link auf die Zielseite gelangen und sich nicht von der Start­sei­te bis zur aktuellen Position durch­ge­klickt haben, erkennen sie mit nur einem Blick in die Bread­crumb-Na­vi­ga­ti­on, wo sie sich gerade befinden. Zudem lädt sie zum Stöbern auf der je­wei­li­gen Seite ein und mindert das Risiko, dass Nut­ze­rin­nen und Nutzer ab­sprin­gen: Die über­ge­ord­ne­te Kategorie ist nur einen Klick entfernt und eine neue Such­an­fra­ge muss dank der Bread­crumb-Na­vi­ga­ti­on nicht gestellt werden. Das bindet auch Nutzende, die über externe Links von anderen Seiten oder über Such­ma­schi­nen auf die jeweilige Un­ter­sei­te gelangt sind.

Die Bread­crumb-Na­vi­ga­ti­on aus der SEO-Per­spek­ti­ve

Was gut für den Nutzenden ist, ist auch gut für Such­ma­schi­nen. Dieser On­line­mar­ke­ting-Grundsatz trifft auch auf die Bread­crumb-Na­vi­ga­ti­on zu: In­zwi­schen werden Bread­crumbs in den Google-SERPs ge­le­gent­lich sogar anstatt einer langen und un­über­sicht­li­chen URL angezeigt. Nur auf Mo­bil­ge­rä­ten ist dies seit 2025 nicht mehr der Fall, um die Über­sicht­lich­keit auf kleinen Bild­schir­men zu ver­bes­sern. Die Such­ma­schi­nen werten Bread­crumbs of­fen­sicht­lich also auch als positives Signal: Ihre Ansicht zeigt Besuchern und Be­su­che­rin­nen noch bevor sie die Website aufrufen, was sie erwartet und in welcher Kategorie sie landen.

Close

Schaut man sich die Be­zeich­nun­gen der einzelnen Bread­crumbs an, fällt direkt der zweite wichtige Vorteil für die Such­ma­schi­nen­op­ti­mie­rung auf: Die Bread­crumb-Na­vi­ga­ti­on bietet die perfekte Mög­lich­keit, ganz na­tür­li­che interne Links mit re­le­van­ten Keywords zu un­ter­füt­tern.

Ein logisch struk­tu­rier­tes Webdesign mit Bread­crumbs macht es dem­entspre­chend nicht nur den Nut­ze­rin­nen und Nutzern, sondern auch den Crawlern der Such­ma­schi­nen leichter, den Aufbau und die Relevanz einer Website zu verstehen. Crawler folgen den internen Links und nehmen die ge­fun­de­nen Seiten in den Such­ma­schi­nen­in­dex auf. Im Idealfall re­sul­tiert daraus ein besseres Ranking der Seite. Bei den Be­su­che­rin­nen und Besuchern wiederum sorgt die bessere Na­vi­ga­ti­on idea­ler­wei­se für einen längeren Auf­ent­halt auf der Seite: Und die Auf­ent­halts­dau­er und die Ab­sprungra­te der User sind ebenfalls wichtige Ran­king­fak­to­ren für die Such­ma­schi­nen.

Dos and Don’ts: Bread­crumbs richtig einsetzen

Eine Bread­crumb-Na­vi­ga­ti­on kann die Usability und sogar das Such­ma­schi­nen­ran­king ver­bes­sern – vor­aus­ge­setzt, sie wird richtig ein­ge­bun­den, sinnvoll platziert und bietet einen Mehrwert. Im Folgenden erklären wir alle Dos and Don’ts anhand von Bei­spie­len.

Bread­crumbs müssen einen Mehrwert bieten

Es gibt nur wenige Fälle, in denen eine Bread­crumb-Na­vi­ga­ti­on ernsthaft irritiert: Einer davon ist, wenn sie ei­gent­lich keinerlei Funktion erfüllt. Websites ohne tief­grei­fen­de Struktur mit nur einer oder wenigen Seiten benötigen keine Bread­crumbs. Die Na­vi­ga­ti­on geschieht in diesem Fall über die primäre Me­nü­leis­te oder den Header der Seite. Sinnvoll und einen deut­li­chen Mehrwert bietend ist im Gegensatz dazu die Bread­crumb-Na­vi­ga­ti­on von Adidas.

Close

Im On­line­shop von Adidas ist die Brot­krü­mel­na­vi­ga­ti­on eine sinnvolle Ergänzung: Je komplexer die Such­an­fra­gen sind, desto wichtiger ist es für die Nut­ze­rin­nen und Nutzer, die Suche un­kom­pli­ziert zu­rück­set­zen zu können. Zudem wird so si­cher­ge­stellt, dass man stets weiß, wo man sich befindet und welche Filter aktuell aktiv sind.

Bread­crumbs müssen logisch sein und dürfen nicht verwirren

Websites, die viele Na­vi­ga­ti­ons­mög­lich­kei­ten anbieten, laufen Gefahr, ihre Nut­ze­rin­nen und Nutzer mit zu vielen Optionen zu ir­ri­tie­ren. Besonders kritisch sind Dopp­lun­gen. Zwar sind Bread­crumbs eher un­auf­fäl­lig und fügen sich in die meisten Designs gut ein, doch wenn sie nur die Funktion der primären Na­vi­ga­ti­ons­leis­te spiegeln, ist niemandem geholfen. Nicht immer hält doppelt auch besser. Ganz anders in folgendem Po­si­tiv­bei­spiel: Auf der Website des t3n-Magazins wird Mehrwert geboten und der Bread­crumb-Trail dezent und leicht auf­find­bar ein­ge­bun­den. Die Bread­crumb-Na­vi­ga­ti­on ist absolut logisch, leicht nach­voll­zieh­bar und fügt sich zudem noch bestens in das Sei­ten­de­sign ein.

Close

Weniger elegante Lösungen verwirren mit gänzlich un­lo­gi­schen Bread­crumb-Trails. In dem folgenden Beispiel taucht bei­spiels­wei­se nur die Start­sei­te, aber keine über­ge­ord­ne­te Kategorie im Pfad auf. Dieser besteht lediglich aus der aktuellen Position. Der klickbare Link ist ebenso sinnlos, da er auf die Seite verweist, auf der sich der Besucher oder die Be­su­che­rin ohnehin bereits befindet. Die Po­si­ti­ons­an­zei­ge bietet ohne Kontext wenig Mehrwert und sorgt mit einem Link zur aktuellen Position unter Umständen sogar für mehr Ver­wir­rung.

Close

Die Bread­crumb-Na­vi­ga­ti­on un­ter­stützt die Haupt­na­vi­ga­ti­on und ersetzt sie nicht

Eine Bread­crumb-Na­vi­ga­ti­on sollte lediglich un­ter­stüt­zend und als sinnvolle Ergänzung zur Haupt­na­vi­ga­ti­on ein­ge­setzt werden. Dem­entspre­chend sollte man sie eher klein halten. So lenkt sie nicht vom ei­gent­li­chen Inhalt ab. Auch sollte sie die primäre Sei­ten­na­vi­ga­ti­on nicht in den Schatten stellen und lediglich einer fein­stu­fi­gen Na­vi­ga­ti­on sowie einer schnellen Ori­en­tie­rung dienen. Nur in Aus­nah­me­fäl­len führt eine sehr um­fang­rei­che Brot­krü­mel­na­vi­ga­ti­on zu einer besseren Usability – etwa auf der Website von Klein­an­zei­gen:

Close

Geg­ne­rin­nen und Gegner von Bread­crumbs ar­gu­men­tie­ren bei Fällen wie diesem ver­mut­lich, dass die Na­vi­ga­ti­ons­mög­lich­keit hier eher ein Anzeichen für man­gel­haf­tes Webdesign sei und der Un­über­sicht­lich­keit dieser Website Ausdruck verleihe. Be­trach­tet man den Screen­shot von Klein­an­zei­gen näher, dürfte aber schnell auffallen, wie um­ständ­lich die Na­vi­ga­ti­on ohne Bread­crumbs wäre: Auf dem On­line­por­tal gibt es Artikel aus zahl­rei­chen Ka­te­go­rien, die Nut­ze­rin­nen und Nutzer durch­stö­bern können. Die Struktur der Website geht von der Start­sei­te über diese diversen Ka­te­go­rien weit in die Tiefe. Die Bread­crumb-Na­vi­ga­ti­on hilft, bei den Un­ter­ka­te­go­rien nicht den Überblick zu verlieren. Zudem be­schleu­nigt sie die Auswahl und das Springen von Kategorie zu Kategorie.

Wie können Bread­crumbs rea­li­siert werden?

Um Bread­crumbs zu erstellen, stehen Ihnen – je nach Anspruch und vor­han­de­nem CMS – un­ter­schied­li­che Wege zur Verfügung: Relativ einfach lassen sich Bread­crumbs mit HTML erstellen. Mit CSS können Sie an­schlie­ßend das Er­schei­nungs­bild anpassen. Das folgende Code-Beispiel zeigt, wie sich Bread­crumbs mit HTML umsetzen lassen:

<nav aria-label="Breadcrumb">
    <ol>
        <li><a href="/index.html">Startseite</a></li>
        <li><a href="/ebene1.html">Ebene 1</a></li>
        <li aria-current="page">Unterpunkt zu Ebene 1</li>
    </ol>
</nav>

Bei dem oben auf­ge­führ­ten Code-Beispiel fehlt für eine fertige und logische Location-based Na­vi­ga­ti­on nur noch die Aus­zeich­nung der aktuellen Position. Hierfür ist kein weiterer Hyperlink notwendig, da man sich lo­gi­scher­wei­se bereits an dieser Stelle befindet. Man kann dafür zudem ein Lis­ten­ele­ment verwenden.

Das aria-label-Attribut ist eine Ei­gen­schaft aus der ARIA-Spe­zi­fi­ka­ti­on (Ac­ces­si­ble Rich Internet Ap­pli­ca­ti­ons) und dient dazu, Screen­rea­dern eine zu­sätz­li­che Be­schrei­bung für ein Element zu geben, um die Bar­rie­re­frei­heit zu ver­bes­sern.

Um die Bread­crumbs such­ma­schi­nen­freund­li­cher zu gestalten, bieten sich optional auch Mi­kro­da­ten, RDFa oder JSON-LD an. Werden die Bread­crumbs im Quellcode auf diese Weise se­man­tisch aus­ge­zeich­net, können die Crawler der Such­ma­schi­nen die Elemente auslesen – so lassen sie sich in den SERPs auch als Rich-Snippets dar­stel­len.

Neben der Umsetzung via HTML und CSS gibt es noch einige weitere Mög­lich­kei­ten, um Bread­crumbs ein­zu­bin­den: Die ein­fachs­te Variante bieten Content-Ma­nage­ment-Systeme an. Dort erfolgt die Im­ple­men­tie­rung im Backend für ge­wöhn­lich schnell und mit wenigen Klicks. Für CMS, die keine Fer­tig­lö­sung anbieten, gibt es in der Regel ent­spre­chen­de Plugins. Mit PHP oder Ja­va­Script ist es zudem möglich, auch in dy­na­mi­schen Websites eine Bread­crumb-Na­vi­ga­ti­on zu im­ple­men­tie­ren.