Zuletzt aktualisiert: September 22, 2021

Du möchtest die Übersicht deiner Internetseite oder deines Onlineshops mit einfachen, aber effektiven Mitteln verbessern? Dann kann der Einsatz einer sogenannten Breadcrumb Navigation für dich lohnen. Dieses Navigationselement hilft dem Nutzer, sich auf deiner Website zu orientieren.

Doch was genau versteht man überhaupt unter diesem Begriff und wann lohnt es sich, ein solches Element auf der eigenen Website zu implementieren? Dieser Glossareintrag beantwortet diese Fragen und verbindet Theorie mit praxisnahen Anwendungsbeispielen. Auch gehen wir auf die Vor- und Nachteile dieses Elementes ein.

Das Wichtigste in Kürze

  • Der Begriff Breadcrumb Navigation beschreibt einen grafischen Navigationspfad auf Internetseiten, der dem Nutzer bei der Seitenorientierung hilft. Er zeigt die aktuelle Position des Users auf der Seitenhierarchie an und erhöht so die Usability einer Website signifikant.
  • Es sind unterschiedliche Arten von Breadcrumb Navigation geläufig. Die häufigste und übersichtlichste Art zeigt die absteigenden Verzweigungen einer Seite im Verhältnis zur Startseite an. Jedoch kann auch der individuelle Klickpfad eines Nutzers für die Breadcrumb Navigation zugrunde genommen werden.
  • Dadurch kann der Nutzer seinen Nutzungsverlauf auf der Website nachvollziehen und schnell wieder zurück auf die übergeordnete Startseite gelangen. Dies hilft dem Nutzer bei der Orientierung und fördert die Nutzerfreundlichkeit deiner Website. Zudem kann dies die Verweildauer auf einer Website erhöhen.

Glossareintrag: Der Begriff Breadcrumb Navigation im Detail erklärt

Damit du dich umfassend informieren kannst, haben wir für dich häufig aufkommende Fragen zu diesem Begriff gesammelt und beantwortet. In den folgenden Abschnitten gehen wir insbesondere darauf ein, wie man den Begriff definieren kann und zeigen, wie Breadcrumb Navigation in der Praxis angewandt wird.

Was bedeutet Breadcrumb Navigation und woher kommt der Begriff?

Breadcrumb Navigation (auch Breadcrumb trail oder nur breadcrumbs) ist ein häufig genutztes Navigationselement auf Websites und anderen Web Applikationen, das dem Nutzer bei der Orientierung helfen soll. Dabei hat es nicht den Zweck, andere Navigationselemente einer Internetseite zu ersetzen. Vielmehr dient es als zusätzliche Orientierungshilfe. Es zeigt dem Nutzer seine aktuelle Position innerhalb eines Pfades, bestehend aus unterschiedlichen, miteinander verknüpften Unterseiten (1). Ein Beispiel für eine solche grafische Orientierungsdarstellung bei einem Online-Shop ist:

Startseite > Jeans > Damenjeans > Produktname Jeansmodell

Diese hierarchische Folge ist die weitverbreitetste Art der Breadcrumb Navigation. Beginnend mit der Startseite wird der Pfad bis zu der kleinstmöglichen Unterseite (in unserem Beispiel ein bestimmtes Jeansmodell) dargestellt. Es gibt aber auch noch weitere Arten von Breadcrumb Navigationen, die andere Pfade anzeigen. Auf diese gehen wir weiter unten im Ratgeber genauer ein.

Der Begriff ,,Breadcrumb Navigation” (englisch für Brotkrumen bzw. Brotkrümel) ist eine Anlehnung an das Märchen Hänsel und Gretel. Durch auf dem Weg verstreute Brotkrümel konnten die von der bösen Hexe entführten Kinder wieder nach Hause finden (2).

In welchen Bereichen wird Breadcrumb Navigation genutzt?

Die Brotkrümelnavigation wird vor allem bei größeren Webseiten und Internetportalen genutzt, deren Seitenstrukturen stark vernetzt sind und Orientierungshilfen benötigen. Auch bei Online-Shops, die mit vielen unterschiedlichen Produktkategorien und Auswahlebenen arbeiten, kann die Breadcrumb Navigation dem Nutzer Orientierung verschaffen. Zudem scheint ein Breadcrumb Navigation Element aus SEO-Perspektive attraktiv zu sein(3).

Wie bei einer echten Karte zeigt die Breadcrumb Navigation immer die aktuelle Position des Nutzers auf der Website an. So kann der Nutzer seinen Pfad nachvollziehen und gegebenenfalls zu zuvor besuchten Seiten zurückkehren. Bildquelle: pixpoetry / Unsplash)

Jedoch ist die Nutzung eines Breadcrumb Navigation Elementes nicht immer von Vorteil. Bei Webseiten, die keine klare Seitenhierarchie besitzen, könnte ein solches Orientierungselement den Nutzer verwirren und somit die Nutzerfreundlichkeit der Website einschränken. Gleiches gilt bei Internetseiten, die nur über sehr schwach verwurzelte Seiten verfügen (4).

Welche Arten kann man bei der Breadcrumb Navigation unterscheiden?

Je nach Pfad, der dem User angezeigt wird, können drei verschiedene Arten von Breadcrumb Navigation unterschieden werden(5). Dazu gehören:

  • Location-Breadcrumbs: Location-Breadcrumbs werden am häufigsten bei der Breadcrumb Navigation eingesetzt. Hierbei wird der Pfad bis zur aktuellen Seite hierarchisch angezeigt: Mit der Startseite beginnend werden alle miteinander verzweigten Unterkategorien aufgelistet, von der höchsten Ebene absteigend bis zu der niedrigsten Ebene.
  • Path-Breadcrumbs: Path-Breadcrumbs zeigen den individuellen Pfad eines Users in chronologischer Reihenfolge an. Sie zeigen den Pfad also nicht in einer hierarchischen Reihenfolge an, sondern dynamisch basierend auf den zuletzt aufgerufenen Elementen.
  • Attribute-Breadcrumbs: Bei Attribute-Breadcrumbs werden Meta-Informationen genutzt, um alle möglichen Attribute der aktuell aufgerufenen Seite darzustellen. Dies wird häufig im E-Commerce-Bereich (bei Online-Shops) eingesetzt, um dem Kunden einen Überblick über die Eigenschaften eines angezeigten Artikels zu geben. Dadurch hat der Kunde die Möglichkeit, Produkte mit gleichen Eigenschaften anzuschauen.

Alle Breadcrumb-Arten haben das Ziel, eine Orientierungshilfe für den User zu geben. Welche Art du letztendlich nutzt, hängt von deinen persönlichen Präferenzen ab. Aber auch die Eigenschaften bzw. der Aufbau deiner Website bestimmt die Breadcrumb-Art. Am geläufigsten sind jedoch Location-Breadcrumbs. Bei Online-Shops werden vermehrt Attribute-Breadcrumbs eingesetzt.

Welche Vor- und Nachteile bietet die Breadcrumb Navigation?

In den folgenden Abschnitten gehen wir genauer auf die Vorzüge einer Brotkrümelnavigation ein. Wir erklären dir auch, bei welchen Website-Typen von der Installation solcher Orientierungshilfen eher abzuraten ist.

Alle Vor- und Nachteile im Überblick.

Erhöhung der Nutzerfreundlichkeit

Einer der größten Vorteile einer Breadcrumb Navigation ist, dass mit einem einfachen Mittel die Nutzerfreundlichkeit einer Website signifikant erhöht werden kann. Durch die übersichtliche Orientierungshilfe kann der Nutzer jederzeit zu seinem Ausgangspunkt zurückkehren. Dadurch ist es wahrscheinlicher, dass der Nutzer andere verzweigte Seiten deiner Website besucht und länger verweilt(6).

Breadcrumb Navigation fördert die Übersichtlichkeit

Vorteile bei der Suchmaschinenoptimierung

Aber auch aus SEO-Perspektive kann es sich lohnen, eine Breadcrumb Navigationsleiste auf der eigenen Website zu implementieren. Der Suchmaschinen-Algorithmus von Google kann mit Hilfe einer Breadcrumb Navigation die Seitenstruktur besser einordnen(7). Dadurch kann es die Seiteninhalte besser kategorisieren und die relevanten Keywords erkennen. Deine Website wird dann beim Suchmaschinen-Ranking eher berücksichtigt und erscheint auf höheren Rängen auf der Suchergebnisliste(8).

Mittlerweile werden auch in den Google-SERPs häufig Breadcrumbs statt der URL in der Seitenvorschau angezeigt(9). Eine übersichtlich gestaltete Website mit logisch aufeinander aufbauenden Einzelseiten erscheint so für den Suchmaschinennutzer als relevantes Ergebnis für seine Suchanfrage. So kannst du mit diesem einfachen Mittel deine Besucherzahlen erhöhen.

Wie kann ich ein Breadcrumb Navigation Element auf meiner Website einführen?

Du weißt jetzt, was man unter Breadcrumb Navigation versteht und welche Vor- und Nachteile damit einhergehen. Nun fragst du dich vielleicht selbst, wie du solche Navigationselemente auf deinen eigenen Internetseiten implementieren kannst. Die meisten Website-Hosts und Content-Management-Systeme bieten diese Funktion bereits an oder können durch Plug-Ins erweitert werden. Dazu gehören unter anderem:

  • WordPress
  • Bootstrap
  • Joomla
  • Shopify

Falls du keines dieser Angebote nutzt, kannst du ein Breadcrumb Navigation Element auch in wenigen Schritten in den HTML-Code deiner Website selbst programmieren.

Gibt es Alternativen zur Breadcrumb Navigation?

Wie bereits ausgeführt, sollte Breadcrumb Navigation nicht als einziges Navigationselement auf einer Seite eingesetzt werden. Vielmehr dient es als zusätzliche Orientierungshilfe. Im Folgenden haben wir weitere beliebte Navigationselemente gesammelt:

  • Drop-Down-Menüs: Drop-Down-Menüs befinden sich meist in der Kopfleiste einer Website. Es expandiert und zeigt alle Auswahlmöglichkeiten, wenn der Nutzer auf das Menü klickt. Somit ist es besonders platzsparend und kann ebenfalls als Orientierungshilfe genutzt werden.
  • Footer-Navigation: Die Footer-Navigation lässt sich ganz unten auf einer Internetseite finden, in der Fußzeile. Meist wird diese Navigation genutzt, um die Menüpunkte der Kopfzeiler einer Website zu spiegeln. Dies eignet sich gut bei Seiten mit umfangreichen Inhalten.
  • Header-Navigation: Die Header-Navigation ist das Gegenteil der Footer-Navigation und befindet sich – wie der Name schon sagt – in der Kopfzeile einer Website. Einzelne Menüpunkte zeigen die wichtigsten, übergeordneten Website-Kategorien an. Diese Art der Navigation lässt sich standardmäßig bei den allermeisten Internetauftritten finden, da User es sehr intuitiv nutzen können.
  • Statische Seitenleisten: Manche Webseiten nutzen statische Seitenleisten, die trotz Scrollen immer links oder rechts neben dem eigentlichen Seiteninhalt verbleiben. Diese unkonventionelle Navigationsstruktur zeigt die Unterkapitel einer Website an und bietet sich besonders bei grafischen bzw. kreativen Inhalten an.

Da die Breadcrumb Navigation meist eines von vielen Navigationselementen ist, kann es einfach weggelassen werden, falls es nicht benötigt wird. In den allermeisten Fällen lohnt es sich jedoch sehr, deinen Seitenbesuchern diese zusätzliche Orientierungshilfe anzubieten.

Fazit

Die Brotkrümelnavigation ist ein unkompliziertes, aber effektives Mittel, um die Übersichtlichkeit einer Internetseite oder eines Online-Shops zu verbessern. Sie hilft dem Nutzer sich innerhalb einer komplexen Seitenstruktur zu orientieren. Dadurch ist es wahrscheinlicher, dass der User auf der Seite bleibt und auch die Angebote auf der Website nutzt. Zudem favorisiert der Google Algorithmus Seiten mit Breadcrumb Navigation beim Ranking auf seiner Suchmaschine.

Wir empfehlen den Einsatz dieser Breadcrumb Navigation Elemente, da die Installation schnell und unkompliziert in nur wenigen Schritten abgeschlossen ist. Wie zuvor bereits in diesem Ratgeber vorgestellt, überwiegen die Vorteile deutlich. In nur seltenen Fällen hat diese Orientierungshilfe keine Vorteile für den Nutzen. Stattdessen solltest du dann auf andere Navigationsalternativen zurückgreifen.

Weiterführende Literatur: Quellen und interessante Links

[1] https://de.ryte.com/wiki/Bread_Crumb#Hintergrund_zur_Breadcrumb-Navigation

[2] https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/

[3] https://www.seobility.net/de/wiki/Bread_Crumbs

[4] https://yoast.com/breadcrumbs-seo/

[5] https://www.usability-tipps.de/info/index.php/verbesserte-usability-durch-breadcrumbs/

[6] https://www.sistrix.de/frag-sistrix/breadcrumbs/#Wie-kann-ich-die-Breadcrumb-Navigation-umsetzen

[7] https://developers.google.com/search/docs/guides/enhance-site?visit_id=1-636299112764558224-42202173&hl=de&rd=1#enable-breadcrumbs

[8] https://www.seo-kueche.de/lexikon/breadcrumb-navigation-brotkrumennavigation/

[9] https://www.ionos.de/digitalguide/websites/webdesign/breadcrumb-navigation-bedeutung-und-beispiele/

[10] https://pixelwerker.de/die-navigationsstruktur/#navigationsstruktur-warum-ist-eine-gute-navigation-wichtig

Bildquelle: 123rf / scyther5

Warum kannst du mir vertrauen?

Testberichte