Breadcrumbs-Navigation erstellen

Bei vielen Seiten (auch hier im HTML-Seminar.de) gibt es zusätzlich zur normalen Steuerung noch eine Breadcrumbs-Navigation. Diese hat den Sinn, dass der Besucher sieht, wo er sich in den Tiefen der Website befindet und schnell wieder eine Ebene höher springen kann.

Diese Breadcrumbs-Navigation, auf Deutsch „Brotkrümelnavigation“ lehnt sich an das Märchen von Hänsel und Gretel an, die Brotkrumen auf dem Weg durch den Wald streuten (was natürlich umweltschutztechnisch ideal ist, da diese nur eine geringe Halbwertszeit haben).

Breadcrumbs-Navigation in HTML

Technisch handelt es sich um einfache Hyperlinks in der Form

<a href="/index.htm">Startseite</a>
<a href="/eben1.htm">Ebene 1</a>
<a href="/eben1-3.htm">Unterpunkt zu Ebene 1</a>

Das ganze sollte umschlossen werden von einem DIV mit der id (class ist genauso in Ordnung) „breadcrumbs“

<div id="breadcrumbs">
<a href="/index.htm">Startseite</a>
<a href="/eben1.htm">Ebene 1</a>
<a href="/eben1-3.htm">Unterpunkt zu Ebene 1</a>
</div>

Warum gerade dieser Benennung? Diese Benennung ist aus Sicht der Suchmaschinenoptimierung wichtig, da Google seit dem 2 Quartal 2010 angefangen hat, diese Breadcrumbs teilweise unterhalb seiner Ergebnisse vor der URL anzuzeigen.

Und zu guter Letzt sollte man noch eine Trennung zwischen den Links einfügen. Dazu kann ein Größer-als-Zeichen herhalten (maskiert dann >)

<div id="breadcrumbs">
<a href="/index.htm">Startseite</a> 
&gt;
<a href="/eben1.htm">Ebene 1</a>
&gt;
<a href="/eben1-3.htm">Unterpunkt zu Ebene 1</a>
</div>

Das Designen der Breadcrumbs wird nun über CSS vorgenommen, z.B. kann hier mit gutem Gewissen die Unterstreichung herausgenommen werden (und beim Überfahren mit der Maus wieder eingeblendet werden).

#breadcrumbs a {
    text-decoration:none;
}

#breadcrumbs a:hover {
    text-decoration:underline;
}

So – und nun viel Spaß beim Erstellen der Breadcrumbs-Navigation.