Navigation in TYPO3: MenuProcessor, TypoScript und Fluid

Um die Navigation einer Webseite in TYPO3 aufzubauen, standen einem geneigten Entwickler bislang die Option TypoScript oder die Einbindung der VHS Extension für den Menu Viewhelper zur Verfügung. Da das Content Management System TYPO3 ständig weiterentwickelt wird, gibt es seit der Version 10.4 als dritte Option den Menu Processor. Über das TypoScript Setup einer Webseite hat man nun die Möglichkeit, für verschiedene Arten einer Navigation eigene Objekte anzulegen und diese ans Fluid Template und die Partials zu übergeben. Im Template können wir dann CSS und die JavaScript Objekte von Bootstrap für Funktionen und Layout des Navigation Menu nutzen. 

Dieses Vorgehen bietet mehrere Vorteile: 

  • Man muss nicht mehr für jede Ebene einer Navigation und die unterschiedlichen Zustände des Menus (aktiv, in Rootline etc.) eigenes TypoScript schreiben 
  • Die Navigation kann mit Fluid aufgebaut werden, was Conditions erlaubt (z. B. aktiver Zustand, Rootline, Formatierung über CSS) 
  • Der MenuProcessor ist Bestandteil des TYPO3 Core und muss nicht mehr über eine Extension geladen werden, die vielleicht für ein TYPO3 Upgrade noch nicht zur Verfügung steht 

Es gibt also mehrere Gründe, diese neue Technologie des MenuProcessor beim grundlegenden Setup einer TYPO3 Webseite zu nutzen. Auf dieser Seite des TYPO3 Tutorials von Thomas Berscheid haben wir Beispiele aus mehreren Kundenprojekten für die Version 10.4 von TYPO3 mit TypoScript Setup und Fluid Templates aufgelistet. 

Header Navbar Navigation: TypoScript und Fluid mit MenuProcessor

In unserem TypoScript Setup erweitern wir das PAGE Objekt unserer Webseite mit dem DataProcessor von TYPO3 und rufen den MenuProcessor auf. In diesem Fall definieren wir ein Objekt headerMenu als Navigation, das alle Untermenüs geöffnet hat und über 2 Ebenen geht. Der Source Code für das TypoScript Setup kann so aussehen: 

 page {
  10 {
    dataProcessing {
      10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      10 {
        levels = 2
        as = headerMenu
        expandAll = 1
        includeSpacer = 1
        titleField = nav_title // title
      }
    }
  }
}

Das Objekt headerMenu können wir nun in unserem Template aufrufen. Wenn wir ein Partial für den Aufbau des Header Template nutzen, dürfen wir nicht vergessen, das Objekt mit Daten ans Partial zu übergeben: 

 <f:render partial="Header" arguments="{headerMenu:headerMenu}" />

Das headerMenu Objekt können wir nun in einem Fluid Template oder Partial auslesen. An dieser Stelle können wir nun Conditions und die Daten des Objektes nutzen, um die Header Navigation der Webseite aufzubauen. Hier eine Fluid Source Code Vorlage für den Aufbau einer Navigation mit Bootstrap 5 für eine Navbar (ohne Bootstrap CSS und JavaScript): 

 <f:for each="{headerMenu}" as="menuItem" iteration="headerMenuIteration">
  <f:if condition="{menuItem.children}">
    <f:then>
      <li class="nav-item dropdown{f:if(condition:'{menuItem.active}',then:' active')}">
        <a href="{menuItem.link}"
          class="nav-link dropdown-toggle"
          id="navbarDropdown{headerMenuIteration.index}">
          {menuItem.title}
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <f:for each="{menuItem.children}" as="menuChild" iteration="headerChildIteration">
            <f:link.page pageUid="{menuChild.data.uid}"
              class="dropdown-item {f:if(condition:'{menuChild.active}',then:' active')}"> 
              {menuChild.title}
            </f:link.page>
          </f:for>
        </div>
      </li>
    </f:then>
    <f:else>
      <li class="nav-item {f:if(condition:'{menuItem.active}',then:'active')}">
        <f:link.page pageUid="{menuItem.data.uid}" class="nav-link">
          {menuItem.title}
        </f:link.page>
      </li>
    </f:else>
  </f:if>
</f:for>

Hier haben wir nun alle Optionen, um das Header Menu für die Navigation mit allen Elementen zu gestalten.

Listen Navigation als Special Menu mit dem TYPO3 MenuProcessor

Um einen Footer oder andere besondere Arten der Navigation aufzubauen, wie z. B. die Links zu Impressum und Datenschutzerklärung im Footer einer Webseite, können wir das Special Menu als Listenmenu des TYPO3 Menuprocessor nutzen. Dies beinhaltet Elemente, die wir bereits aus dem TMENU und HMENU von TypoScript kennen. Auch beim MenuProcessor List Menu geben wir besondere Seiten vor. Wie in TypoScript gewohnt können wir hier auch SEO vollziehen, Titel für die Links vergeben und eine Hierarchie der Variablen erstellen. 

Das TypoScript des Special Menu kann wie folgt aussehen:

 page {
  10 {
    dataProcessing {
      20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
      20 {
        special = list
        special.value = 7, 8
        as = footerMenu
        titleField = nav_title // title
      }
    }
  }
}

Auf das erzeute Objekt des footerMenu können wir nun im Fluid Template zugreifen und haben alle Möglichkeiten zur Darstellung:

 <f:for each="{footerMenu}" as="footermenuItem" iteration="footerMenuIteration">
   <f:link.page
     pageUid="{footermenuItem.data.uid}"
     class="nav-link{f:if(condition:'{footermenuItem.current}',then:' active')}">
     {footermenuItem.title}
   </f:link.page>
 </f:for>

Damit können wir nun unsere Footer Navigation in unsere TYPO3 Webseite einbauen.

 

Language Selector: Sprachumschalter mit TYPO3 LanguageMenuProcessor

Der Sprachumschalter in TYPO3 war eines der letzten Objekte in einer TYPO3 Webseite, in denen man ausschließlich mit TypoScript oder der VHS Extension arbeiten durfte. Seit der Version 10.4 von TYPO3 hat sich auch dies geändert, nun kann man den MenuProcessor des TYPO3 Core für einen Language Selector nutzen. Sobald man über das Template der Webseite und die Konfiguration, vielleicht auch direkt über die config.yaml die Sprachen der Webseite konfiguriert hat, verfügt man nun über die Option, Fluid für die Gestaltung des Sprachumschalters zu nutzen. Wenn man schon mal die IMAGE Funktionen von TYPO3 für einen Sprachumschalter mit Länderflaggen genutzt hat, wird einem die Möglichkeit der Arbeit über ein Fluid Template als Erleichterung vorkommen. 

Hier nun der TypoScript Code für das Setup:

 page {
  10 {
    dataProcessing {
      30 = TYPO3\CMS\Frontend\DataProcessing\LanguageMenuProcessor
      30 {
          languages = 0,1,2
          as = languageMenu
      }
    }
  }
}

Mit Hilfe unseres Fluid Template können wir nun den Language Selector im gewünschten Layout in unsere Webseite einbauen und mit den Funktionen für die aktive, optionale oder nicht vorhandene Übersetzung jeder Seite einbinden:

 <f:for each="{languageMenu}" as="item">
   <li
     class="{f:if(condition: item.active, then: 'active')}
            {f:if(condition: item.available, else: 'text-muted')}">
     <f:if condition="{item.available}">
       <f:then>
         <a class="dropdown-item"
           href="{item.link}"
           hreflang="{item.hreflang}"
           title="{item.title}">
             <span>{item.navigationTitle}</span>
         </a>
       </f:then>
       <f:else>
         <span>{item.navigationTitle}</span>
       </f:else>
     </f:if>
   </li>
 </f:for>

Damit haben wir einen Sprachumschalter für unsere Webseite.

Weitere Informationen zum MenuProcessor

Zur TYPO3 Referenz MenuProcessor