Navigationshilfe mit Breadcrumbs
Wie im Märchen

Der Weg zurück

Navigationshilfe mit Breadcrumbs

Breadcrumb – der Terminus stammt aus der Märchen- und Sagenwelt. Um den Weg zurück aus dem finsteren Wald zu finden, in dem ihre Eltern sie aussetzten, streuten die Märchenfiguren Hänsel und Gretel Brotkrumen auf dem Waldboden aus. Bekanntlich nützte ihnen das nicht viel, weil hungrige Vögel die essbaren Orientierungsmarken als Nahrung verwerteten.

Das Märchen lieferte jedoch den Begriff für eine Navigationshilfe für Webseiten, die dem Besucher den kompletten Pfad zur aktuellen Position auf einer Website als Hypertextverweise liefert. Kaum eine Site, die etwas auf sich hält, verzichtet auf diese Form der Navigation.

Im Prinzip ist sie nichts weiter als eine Umsetzung des Zurück-Buttons des Browsers in eine horizontale Link-Liste. Während der Besucher mit dem Browser-Werkzeug sich jedoch quasi im Blindflug durch die Seiten bewegt, zeigt ihm eine Breadcrumb-Navigation jederzeit die aktuelle Position in der Seitenhierarchie an.

Umsetzung per Skript

Navigationshilfe mit Breadcrumbs

Die Umsetzung einer solchen Breadcrumb-Navigation per Skript ist keine allzu große Affäre. Dazu wird einfach der URL einer Seite ausgewertet. Diese Technik setzt allerdings eine gut in mehrere Verzeichnis-Hierarchien gegliederte Seitenstruktur voraus. Wer Tausende von Webseiten einfach in das Dokumenten-Verzeichnis des Webservers kippt, wird daraus dem Besucher nur schwerlich eine aussagekräftige Breadcrumb-Navigation produzieren können. Zumindest nicht mit Hilfe eines Skripts, das sich auf die Auswertung eines Verzeichnisbaums stützt.

Ein einfaches PHP-Skript zur Realisierung einer Breadcrumb-Navigation kann so aussehen:


$an="Sie befinden sich hier: ";
$home="http://www.meinedomain.de/";
//Hier muss die jeweile Domain-Adresse eingetragen werden
$pie=explode("/","$_SERVER[PHP_SELF]");
$tr=" > ";
// Alternativ können auch andere Trenner wie : oder / eingetragen werden
$b=count($pie);
echo $an."
Startseite";
// Auch hier sind alternative Bezeichnungen wie Home oder Start denkbar
for($a=1;$a<$b-1;$a++){
$ta=$ta.$pie[$a]."/";
echo $tr."".ucfirst($pie[$a])."";}
$file=explode(".",ucfirst($pie[$b-1]));
echo "".$tr.$file[0]."";
?>


Mit weniger Code

Navigationshilfe mit Breadcrumbs

Natürlich muss dieses Code-Fragment nicht unbedingt
in jede Seite eingebaut werden. Alternativ kann dss Skript auch in einem Verzeichnis abgelegt werden (zum Beispiel unter breadcrumb.inc) und dann mit einer include-Anweisung eingebunden werden:

Das reduziert den Codieraufwand etwas. Allerdings darf man sich keinen Illusionen hingeben. Wer eine solche Navigation nachträglich eine umfangreiche Website einbauen will, hat einiges zu tun. Zu beachten ist auch, dass bei dieser Methode eventuelle HTML-Seiten mit der Endung PHP zu speichern sind. Und das kann wieder zu erheblichen Problemen bei der herkömmlichen Verlinkung führen.

Bei jeder Website, die mehr als 20 bis 30 Seiten umfasst, ist ein nachträglicher Einbau einer Breadcrumb-Navigation mit Hilfe dieser PHP-Methode schwerlich mit den Prinzipien eines rationellen Webdesigns in Einklang zu bringen. Wer einen etwas eleganteren PHP-Programmierstil bevorzugt, kann eine Breadcrumb-Navigation auch mit Hilfe einer entsprechenden Klasse realisieren. Ein gutes Beispiel ist die Klasse breadcrumb, die auf der Seite www.baskettcase.com/classes/breadcrumb zum Download zur Verfügung steht.

Breadcrumb-Klasse

Navigationshilfe mit Breadcrumbs

“.$breadcrumb->show_breadcrumb().”

Andere Skripte

Navigationshilfe mit Breadcrumbs

Nicht nur mit PHP lassen sich Breadcrumb-Navigationen erstellen, freie Skripts stehen zum Beispiel auch für ASP (evolt.org) oder Perl (cgi.xwolf.de/freecode/navigation) zur Verfügung.

Das zu Grunde liegende Prinzip ist bei allen Skriptvarianten weitgehend identisch ? und die Probleme beim nachträglichen Einbau in eine Sammlung statischer HTML-Webseiten auch: Es muss eine hierarchische Verzeichnis-Struktur vorhanden sein und HTML-Seiten müssen beim Einbau von Skripts entsprechend der verwendeten Skriptsprache umbenannt werden.

Die Javascript-Variante

Navigationshilfe mit Breadcrumbs

Zumindest die Notwendigkeit eine Umbenennung von HTML-Files kann man sich mit der Javascript-Variante ersparen. Die sieht so aus:

Das Skript ermittelt über document.location.href; den URL zu der aktuell aufgerufenen Seite. Dieser wird über die split-Funktion nach den Slashes geteilt. Das Ergebnis ist ein nummeriertes Array. In der folgenden Schleife wird das Array ausgelesen. Dabei wird jeweils überprüft, ob der Wert zu dem dazugehörigen Index gleich der Domain ist. Dabei spielt es keine Rolle, ob diese ein www aufweist oder nicht. Ist dies der Fall, wird anstatt der Domain als Link Startseite angezeigt.

Auch hier kann das Skript wieder an zentraler Stelle abgelegt und in die jeweiligen Seiten inkludiert werden. Da Seiten mit Javascript keine eigenen Datei-Endungen benötigen, können die Seiten unter ihrem alten Namen abgelegt werden, und die Struktur der vorhandenen Verlinkung bleibt erhalten.

Manuelle Methode

Navigationshilfe mit Breadcrumbs

Für kleine Sites bietet sich auch noch die manuelle Methode an. Dabei werden einfach alle Seiten mit einem geeigneten Editor aufgerufen und an der passenden Stelle die Breadcrumb-Zeile mit HTML-Mitteln eingebaut. Angesichts des Aufwands, den Skript-Lösungen in jedem Fall erfordern, ist diese Variante durchaus eine Betrachtung wert. Eine Breadcrumb-Navigation mit vier Items erfordert zum Beispiel folgenden Codieraufwand:

Man packt die Navigationszeile am besten in einen div-Container, um sich alle Freiheiten für die exakte Positionierung und Formatierung offen zu halten. Die reine HTML-Lösung hat sogar noch den Vorteil, dass mit viel aussagekräftigeren Begriffen gearbeitet werden kann,
als dies bei der abstrakten Auswertung von Verzeichnisnamen möglich ist.

Dynamische Webseiten

Navigationshilfe mit Breadcrumbs

Wesentlich weniger Aufwand muss man bei dynamischen Seiten für eine Breadcrumb-Navigation betreiben. Diese Seiten werden zum Zeitpunkt des Abrufs durch einen Surfer aus Datenbankinhalten generiert. Dadurch, dass das unter Umständen mehrstufige Kategorien-System, in das eine solche Seite eingeordnet ist, ebenfalls in der Datenbank gespeichert ist, ist eine dynamische Erzeugung einer Breadcrumb-Zeile relativ einfach zu realisieren.

Eine Programmierung ist in vielen Fällen überhaupt nicht notwendig. Die Pflege solcher dynamischer Websites erfolgt in der Regel mit Hilfe von Content-Management-Systemen. Und die verfügen über integrierte Automatismen zur dynamischen Erstellung von Breadcrumb-Navigationszeilen. Auch Open-Source-Applikationen wie Typo 3 oder Mambo warten mit solchen Features auf.

Ähnliches gilt für andere Standard-Applikationen wie Foren, Bilder-Galerien oder Weblogs, die man auf auf vielen interaktiven Websites findet. Auch hier gehört eine Breadcrumb-Navigation zum Standard.

Zum Beispiel wird beim bekannten phpBB2-Forum aus den Kategorien, Unterkategorien und schließlich dem Topic des angeklickten Forumsbeitrags dynamisch eine Breadcrumb-Navigation aufgebaut, die beim Zurechtfinden innerhalb des unter Umständen riesigen Wustes an Diskussionsbeiträgen eine wertvolle Hilfe leisten kann.

Aufwand und Ertrag

Navigationshilfe mit Breadcrumbs

Als Fazit lässt sich feststellen, dass der nachträgliche Einbau einer Breadcrumb-Navigation mit einem Riesenaufwand verbunden ist. Man sollte sich daher genau überlegen, ob man diesen Aufwand betreiben will. Zumal es durchaus Stimmen gibt, die die Nachfrage einer solchen zusätzlichen Navigationshilfe eher gering einschätzen.

Etwas anders sieht die Sache aus, wenn eine solche Navigation schon durch die verwendete Applikation als Option zur Verfügung steht. Hier hält sich der Implementierungsaufwand in Grenzen, und deshalb sollte man dieses Feature auf jeden Fall nutzen.