Webdesign - Breadcrumb Navigation als Navigationshilfe

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie erstellt man eine Navigationshilfe
(breadcrumb navigation) mit PHP?

08Apr2014

Breadcrumb Navigation als Navigationshilfe


Eine Brotkrümelnavigation (englisch: breadcrumb navigation) hilft hauptsächlich bei der Orientierung von tief verschachtelten Pfaden innerhalb einer Website. Solch eine Navigationshilfe zeigt dem Besucher die aktuelle Position in Bezug auf die übergeordneten Seiten und er kann darüber sehr schnell zur einer der höher gelegenen Ebenen/Seiten dieser Website wechseln.
Eine Brotkrümelnavigation fördert eine wirkungsvolle Benutzerfreundlichkeit (englisch: Usability) und ist demnach selbstverständlich bei einer barrierefreien Website. Zwischen einer Benutzerfreundlichkeit und der Suchmaschinenoptimierung gibt es viele Gemeinsamkeiten, die auch von Suchmaschinen honoriert werden. Man versucht den Algorithmus der Suchmaschinen so aufzubauen, dass erkannt wird, ob eine Webseite für den Besucher gut und durchgängig aufgebaut ist. Das was benutzerfreundlich ist, kann für Suchmaschinen also nicht verkehrt sein.
Wenn Sie sich an eine Brotkümelnavigation halten, sollten Sie auf einer Website nie die Orientierung verlieren, wenn sie denn durchgängig aufgebaut ist.
Besucher die zum Beispiel direkt auf dieser Webseite gelandet sind, finden über die Brotkrümelnavigation einen Hinweis über die Einordnung der Seite zur Übersichtsseite und können sehr einfach zu dieser übergeordneten Seite wechseln.

Bei meiner Brotkrümelnavigation, oben links über der Menüzeile, sehen Sie wo Sie sich gerade in der Baumstruktur/Hierarchie der Website befinden:

"Sie befinden sich hier: webdesign klamonfra (Startseite: webdesign klamonfra) > Codeschnipsel (Die übergeordnete Seite: Codeschnipsel) > Breadcrumb-navigation (Die Seite auf der Sie sich gerade befinden)"

Fahren Sie mit dem Mauszeiger über das obige Beispiel und Sie erhalten noch weitere Informationen. Durch die Pfeile zwischen den einzelnen Elementen der Navigationshilfe wird die Richtung zur aktuellen Seite einfach und deutlich aufgezeigt. Von einem Schrägstrich oder Doppelpunkt ist daher abzuraten, da er nicht eindeutig den Weg aufzeigt. Die Worte: "Sie befinden sich hier:" sind dabei eine gute Ergänzung, wenn Sie sicherstellen wollen, dass auch unerfahrenere Besucher erkennen, worum es sich bei dieser Einblendung handelt.
Grundsätzlich beginnt also eine Navigationshilfe mit der Startseite und danach folgen die Unterseiten, jeweils um eine Ebene tiefer in der Hierarchie der Website. Dabei wird der gesamte Pfad zur aktuellen Seite angezeigt.
Von dieser Seite kommen sie zum Beispiel sehr einfach wieder zurück zur Übersichtsseite der Codeschnipsel, in dem Sie oben in der Zeile über dem Menü auf das Wort "Codeschnipsel" klicken.

Der Name, Brotkrümelnavigation, wird oft in Anlehnung an das Märchen der Gebrüder Grimm "Hänsel und Gretel" verstanden. In diesem Märchen streuen die Kinder Brotkrümel auf den Weg, um den Rückweg zu finden.
Aber das ist nicht ganz richtig, denn mit der Brotkrümelnavigation wird kein historischer Pfad, sondern wie oben erklärt eine Hierarchie beschrieben.
Möchte man den historischen Pfad, also den Weg den man gegangen ist, zurückgehen, ist das über den "Zurück-Button" des Browsers möglich. Diese Variante zeigt dem Besucher seine tatsächlich zuletzt aufgerufenen Seiten an, die ihn auf die aktuelle Seite geführt haben.


Umsetzung und Realisierung der sogenannten Brotkrümelnavigation

Die Brotkrümelnavigation ist mit ein paar Zeilen "php (Skriptsprache: Hypertext Preprocessor)" realisiert, bei der die URL (Uniform Resource Locator (world wide web address)) der aktuellen Seite entschlüsselt wird. Und der angenehme Effekt dieser PHP (Skriptsprache: Hypertext Preprocessor)-Variante, sie ist barrierearm und suchmaschinentauglich. Wichtig bei dieser Umsetzung ist, die aufgerufene und aktuelle Seite sollte dabei nicht angeklickt werden können.

<aside>
    <?php
        $url = explode("/","$_SERVER[PHP_SELF]");
        $a = count($url);
        echo "Sie befinden sind hier: 
              <a href='/' title='Startseite von webdesign-klamonfra'>
                  webdesign klamonfra
              </a>";
        $file = explode('.',ucfirst($url[$a-1]));
        echo " > ".$file[0];
    ?>
</aside>

Durch die Angabe "$url = explode("/", "$_SERVER[PHP_SELF]")" und mit Hilfe des Trennzeichen "/" wird die aktuelle URL (Uniform Resource Locator (world wide web address)) in Einzelteile der Adresse aufgelöst und in ein Array/Feld mit dem Namen "$url" geschrieben. Mit "$a = count($url)" wird dann die Anzahl der Elemente im Array, die Tiefe der Hierarchie, gezählt. Danach wird der Text: "Sie befinden sich hier:" und die Startseite mit Verweis und Titel ausgegeben.
Abschließend wird durch "$file = explode('.', ucfirst($url[$a-1]))" beim Namen der aktuellen Seite das erste Zeichen großgeschrieben und der Seitennamen dann ohne Dateiendung und Verweis dargestellt.

Natürlich lassen sich nun per CSS (Cascading Style Sheet) auch andere Gestaltungsmöglichkeiten, als die auf dieser Website dargestellten, realisieren. Zum Beispiel eine Brotkrumen-Navigation im typischen "apple-Design" wie unten aufgeführt.

Das CSS (Cascading Style Sheet) für das Beispiel sieht wie folgt aus:

#breadcrumb {
    height: 30px;
    line-height: 30px;
    margin: 1em 0;
    border: 1px solid #eee;
    background: linear-gradient(#ffffff,#f3f3f3 50%,#e3e3e3 51%,#f7f7f7);
}

#breadcrumb a,
#breadcrumb em,
#breadcrumb span {
    color: #404040;
    font-weight: bold;
    float: left;
    padding: 0 8px;
}

#breadcrumb span {
    overflow: hidden;
    padding: 0 0 0 10px;
    width: 0;
    opacity: .5;
    background: url(../breadcrumb.png) no-repeat;
}

Das "overflow: hidden" und die Größe von "width: 0" beim "span-Element" werden dafür benötigt, um die Pfeile ">" auszublenden. Dadurch ist gewährleistet, dass bei deaktiviertem CSS (Cascading Style Sheet) der Pfeil anstatt das Bild eingeblendet wird.
Damit ist die Breadcrumb Navigation fertig!

Zum Seitenanfang springen Λ