Breadcrumb - Layout

Brotkrümelnavigation (Breadcrumb) bezeichnet man eine Leiste zur Navigation, die dem Besucher den Pfad der aktuellen Seite anzeigt.

Bis 2013

Die MSXFAQ hat ganz lange ein klassisches Layout für die Anzeige der aktuellen Seitenposition in der Struktur verwendet:

Was andere machen

Auf vielen anderen Seiten habe ich ein Layout gesehen., das ich "schöner" fand und technisch sogar einfacher aufgebaut wurde, z.B. auf

Eigene Umsetzung

Die Struktur meiner Seite ist vorgegeben (Siehe Struktur 2013) und kann ich per VBA-Skripte erstellen. Die Formatierung erfolgt per CSS-Formate. Bleibt die Frage des "wie" und da habe ich mir die Umsetzungen verschiedener Seiten anschaut. Schließlich sollte die Navigation auch gut aussehen, wenn z.B. das Stylesheet nicht geladen wird oder der Client das nicht kann.

Ich habe mich dann gegen eine "Aufzählung" mit ul/Li-Elementen entschieden und einfach den Text wie bisher beibehalten. per Stylesheet habe ich dann aber doch dafür gesorgt, dass ich "Bereiche" mit Pfeilen habe.

Im HTML-Code ist das dann weiterhin wie folgt sichtbar. nur die ">>"-Zeichen muss ich natürlich entfernen.

Über das DIV-Tag kann ich die Formatierung ganz einfach auf den Bereich beschränken und der Rest machen dann zwei CSS-Kennzeichnungen.

#breadcrumb {
    font-size: 11px;
    max-width: 820px;
    height: 26px;
    line-height: 26px;
    padding-left:5px;
    overflow: hidden;
    margin-top: 4px;
    display:block;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ADACA7;
    border-top: 1px dashed #ADACA7;
    background: #F4F4F3;
}

#breadcrumb a {
    line-height: 26px;
    padding-right: 14px;
    margin-right: 7px;
    float: left;
    display: block;
    background-image: URL("images/css/breadcrumbarrow.gif");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position:right top;
}

Und das ganze sieht dann so aus

Breadcrumb und Google

Anfang 2016 habe ich dann auf der Google Developer Seite gesehen, dass Google auch den Pfad eines Dokuments "verstehen" kann, wenn man als Autor eine gewisse Struktur versteckt hinterlegt.

Analog zu den Breadcrumbs am Anfang muss man irgendwo in der Seite einfach ein Stück Code einbauen, welches dann von Google auch interpretiert wird.

Diese Funktion habe ich noch nicht eingebaut

Weitere Links