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