imported>SchlurcherBot: Bot: http → https

2026-04-27T21:32:30Z

Bot: http → https

Neue Seite

'''Brotkrümelnavigation''' oder '''Brotkrumennavigation''' ({{EnS|''breadcrumbs'', ''breadcrumb navigation'', ''breadcrumb trail''}}) ist ein [[Entwurfsmuster]] für die Gestaltung [[Grafische Benutzeroberfläche|grafischer Benutzeroberflächen]]. Üblicherweise ist es eine Textzeile, die dem Benutzer anzeigt, in welcher Verzweigung er sich innerhalb einer Applikation befindet.

''Brotkrümel'' zeigen den Pfad zum aktuellen Element, beispielsweise zu der [[Webseite]] oder Kategorie im Katalog. Die Navigation soll die Orientierung innerhalb tief verzweigter Elementbäume verbessern, indem sie [[Hyperlink|Links]] zu übergeordneten oder themenverwandten Elementen anbieten. Oft sind diese als Schaltflächen ausgestaltet.

Der Name ''Brotkrümelnavigation'' wurde in Anlehnung an das Märchen [[Hänsel und Gretel]] gebildet, in dem die in den Wald geführten Kinder Brotkrumen auf den Weg streuen, um den Weg zurückzufinden.

Mitunter wird die Navigationszeile auch als '''Ariadnepfad''' bezeichnet. Diese Bezeichnung ist der griechischen Mythologie entlehnt. [[Ariadne]] schenkte [[Theseus]] ein Woll[[Knäuel (Textil)|knäuel]], das er im Labyrinth des [[Daidalos]] abrollte. Mit Hilfe dieses [[Ariadnefaden]]s fand er wieder aus dem Labyrinth heraus.

== Navigationsarten ==
[[Datei:Wegweiser Wikivoyage Breadcrumb.jpg|mini|rechts|Beispiel für die Implementierung auf einer Website.]]
=== Location (Ort) ===
'''Location-Breadcrumbs''' zeigen die aktuelle Position eines Elements relativ zum Wurzelelement an. Damit sieht der Besucher auf einen Blick, in welchem Element-Zweig sich das aktuelle Element befindet.

Beispiel:
<div style="border:1px solid #88a; color:#6a6a6a; display:table; margin-left:2em; padding:4px;">
Wurzelkategorie (Katalog) → Unterkategorie 1 → Unterkategorie 1.3 → …
</div>

=== Path (Pfad) ===
'''Path-Breadcrumbs''' zeigen die zuletzt aufgerufenen Elemente nacheinander an. Der Benutzer sieht so den Weg, auf dem er das aktuelle Element erreicht hat.

Beispiel:
<div style="border:1px solid #88a; color:#6a6a6a; display:table; margin-left:2em; padding:4px;">
Unterkategorie 2.1 → Startseite → Kategorie 1 → Kategorie 3
</div>

=== Attribute (Eigenschaft) ===
'''Attribute-Breadcrumbs''' zeigen anhand von Meta-Informationen mehrere unterschiedliche Navigationen, die jeweils zum aktuell aufgerufenen Element führen.

Beispiel:
<div style="border:1px solid #88a; color:#6a6a6a; display:table; margin-left:2em; padding:4px;">
Startseite → Deutschland → Bayern → Kulinarisches → Schweinebraten<br />Startseite → Essen → Hauptgerichte → Fleisch → Schweinebraten<br />Schlagwörter: Braten, Fleisch, Bayern, Essen
</div>

== Dateimanager mit Breadcrumb-Funktion ==
* [[Dolphin (KDE)|Dolphin]]
* [[Finder (Mac)]]
* [[Nautilus (Dateimanager)|Nautilus]]
* [[SpeedCommander]]
* [[Thunar]]
*[[Total Commander]]
*[[Windows-Explorer]] ab [[Microsoft Windows Vista|Vista]]

== Siehe auch ==

* [[Navigationsleiste]]

== Weblinks ==
* Usability-Tipps.de: [http://www.usability-tipps.de/info/index.php/verbesserte-usability-durch-breadcrumbs/ Breadcrumbs – „Brotkrümel“ für eine verbesserte Usability]
*Barrierefreies-Webdesign.de: [https://www.barrierefreies-webdesign.de/knowhow/breadcrumb/html-und-css.html Eine ergänzende Orientierungshilfe: Die Brotkrumen-Navigation] (2011, 2016 aktualisiert)
* [https://www.useit.com/alertbox/breadcrumbs.html Jakob Nielsen: Breadcrumb Navigation Increasingly Useful] (englisch)

{{SORTIERUNG:Brotkrumelnavigation}}
[[Kategorie:Grafische Benutzeroberfläche]]
[[Kategorie:Entwurfsmuster]]

Brotkrümelnavigation - Versionsgeschichte

imported>SchlurcherBot: Bot: http → https