TYPO3 | Breadcrumb Navigation mit Startseiten Icon

Eine Breadcrumb Navigation, auch Brotkrumen-Navigation genannt, ist nicht nur gut für die Usability der Webseite, auch bringt sie einige Vorteile in der Suchmaschinenoptimierung.
Unser Ergebnis sieht auch gar nicht mal schlecht aus.
Breadcrumb mit TypoScript erstellen
Erstellt ist eine Breadcrumb in TYPO3 auch recht schnell. Mit folgendem Snippet ist das Thema schon abgehakt.
lib.breadCrumb = COA
lib.breadCrumb {
10 = IMAGE
10 {
#Pfad zu der Grafik
file = fileadmin/template/Resources/Public/Images/home-icon.svg
altText = Toller SEO Text
stdWrap.typolink.parameter = 1
stdWrap.typolink.ATagParams = class="home-icon"
stdWrap.typolink.wrap = <li>|</li>
}
20 = HMENU
20 {
special = rootline
special.range = 1|-1
1 = TMENU
1 {
noBlur = 1
NO = 1
NO {
linkWrap = <li>|</li>
}
CUR = 1
CUR {
linkWrap = <li class="current">|</li>
doNotLinkIt = 1
}
}
}
wrap = <nav><ul class="breadCrumb">|</ul></nav>
}
Mit CSS das Menü verschönern
ul.breadCrumb {
margin: 0;
padding: 0;
}
.breadCrumb li {
display: inline-block;
list-style: none;
margin: 0;
padding: 8px 20px 8px 0;
font-size: 11px;
color: #cecece;
}
.breadCrumb li a {
color: #95c11e;
text-decoration: none;
display: block;
}
.breadCrumb li a.home-icon img {
height: auto;
margin-left: 10px;
margin-top: -7px;
max-width: 20px;
}
.breadCrumb li a:after {
content: "»";
padding-left: 20px;
font-size: 15px;
}
In nur wenigen Schritten haben wir somit ein paar Pluspunkte bei unseren Besuchern und bei Google gesammelt.
Getestet mit TYPO3 7.6.20
Noch keine Kommentare vorhanden. Sei der erste!
Weitere Beiträge
Aktuelles Datum mit TypoScript anzeigen
Google Analytics anonymisieren
OXID 6 | Modul erstellen mit Namespaces und Composer
PHP 7 | Daten aus HTML-Formular in eine XML-Datei speichern