Breadcrumb Menü mit Typoscript

Der Begriff "Breadcrumb" Menü hat seinen Ursprung ja tatsächlich in "Hänsel und Gretel" die Brotstückchen im Wald verteilten um ihren Weg zurück zu finden. Und genau diese Aufgabe hat das Menü auch im digitalem Zeitalter.

Der Unterschied zu normalen Menüs besteht darin, das wir den Pfad zur Root Seite abbilden und nicht sämtliche Seiten auf unterschiedlichen Levels.

Ein einfaches Beispiel:

# Breadcrumb Menü

lib.breadcrumb = HMENU
lib.breadcrumb {
    special = rootline
    special.range = 0|-1
    
    1 = TMENU
    1 {
        NO.linkWrap =  | »
        CUR = 1
        CUR.linkWrap =  | 
        CUR.doNotLinkIt = 1
    }
}

 

Erklärungen:

Mit der Zeile 

special = rootline

weisen wir TypoScript an das es sich bei dem HMENU um ein Rootline Menü handelt. Die Range gibt an das von der aktuellen Seite (0) bis zum Root Template (-1) alles mit einbezogen werden soll.

Im "normal" (NO) Status fügen wir noch ein ">>" hinzu. Die aktuelle Seite - CURrent - wird nicht verlinkt.

Einen active Status brauchen wir hier nicht, das die aktuelle Seite immer den current Status hat.

TypoScript Breadcrumb mit Bootstrap Klassen

Hier noch ein Snippet in dem alle standard Bootstrap Klassen für die Breadcrumb enthalten sind:

lib.breadcrumb = HMENU
lib.breadcrumb {
    special = rootline
    special.range = 0|-1
    
    1 = TMENU
    1 {
        wrap =   <ol class="breadcrumb"> | </ol>
        NO.linkWrap =  <li>| </li>
        CUR = 1
        CUR.linkWrap =  <li class="active">|</li> 
        CUR.doNotLinkIt = 1
    }
}


Hinweis: Der Trenner "/" wird in Bootstrap über CSS erzeugt und braucht nicht im TypoScript mit angegeben zu werden.

Weitere Artikel zu diesem Thema:

Responsive Webdesign
mehr auf Amazon
Empfehlenswerte Lektüre:

Responsive Webdesign

Das Buch ist ein Standardwerk für jeden der sich mit diesem Thema auseinandersetzt. Unabhängig von Frameworks werden alle notwengigen Aspekte detailliert beschrieben und bebildert - auf über 400 Seiten erhält der Leser weit mehr Infos als es online Quellen bieten können. Mit dem umfangreichem Kapitel MediaQueries ist es zudem ein Nachschlagewerk für die tägliche Arbeit.

Kommentare

keine Kommentare vorhanden

Kommentar verfassen

Die Email Adresse wird nicht veröffentlicht.