TYPO3 Navigation mit TypoScript und Bootstrap

Navigation über TypoScript erstellen und einbinden

TYPO3 bietet mit einer Konfigurationssprache TypoScript einige Möglichkeiten zur Erstellung einer Navigation an. Für eine hierarchische Navigation in einer TYPO3 Webseite gibt es mehrere Typen von Menus, die man nutzen kann. 

Wir zeigen Ihnen die Grundzüge eines hierarchischen Menus für eine Navigation in TypoScript. 

Libraries für Navigation in TypoScript erstellen und in Fluid einbinden

Um eine Navigation in TYPO3 mit TypoScript aufzubauen ist es am sinnvollsten, eigene Libraries zu erstellen. In diesen Programmbibliotheken erstellt man den TypoScript Code für die Navigation. Diesen Code bindet man über das Setup ins TypoScript Template und per Fluid in die Webseite ein. 

Wir schildern Ihnen die Einbindung von Libraries in TypoScript und Fluid 

Responsive Navigation mit Bootstrap 3 und 4

Zur Gestaltung responsiver Webseiten hat sich Twitter Bootstrap als Quasi-Standard durchgesetzt. Das JavaScript- und CSS-Framework erlaubt die Gestaltung einer Navigation, die nicht nur auf Desktop-Rechner mit großen Bildschirmen, sondern auch auf einem Smartphone angezeigt werden kann. Zudem ist eine Bootstrap Navigation sowohl per Mausklick als auch per Touchscreen nutzbar. 

Bei der Programmierung einer solchen Navigation mit TypoScript muss man bestimmte Regeln beachten, um einen Quelltext zu erzeugen, mit dem das Bootstrap Framework arbeiten kann. TypoScript bietet sämtliche Objekte und Funktionen an, um ein hierarchisches Menu für Bootstrap zu erstellen.

Voraussetzung dafür ist die Einbindung des gesamten Bootstrap Framework in die Webseite, die man ebenfalls über TypoScript erledigen kann. 

Bei der Nutzung mehrerer Navigationsebenen in einer Webseite hat man bei Bootstrap allerdings das Verhalten, dass Seiten in der 1. Ebene einer Webseite als Dropdown-Element genutzt werden und damit auf diesem Weg nicht erreichbar sind. Über eine Breadcrumb-Navigation sind sie hingegen erreichbar. Dieses Problem kann mit den Elementen des Seitenbaums von TYPO3 erfolgreich lösen. 

Wir zeigen Ihnen, wie man eine Navigation mit Bootstrap in TypoScript aufbaut und redaktionell bearbeitet. 

Mega Menu für Bootstrap mit TypoScript und VHS Viewhelper

Seit der 4. Generation von Bootstrap gibt es die Möglichkeit eines Mega Menus. Mit dieser Navigation für umfangreiche Webseiten kann man mehrere Ebenen und zusätzliche Angebote in einem Dropdown darstellen. TYPO3 bietet hier vom Grundsatz her zwei Möglichkeiten an, ein solches Menu zu erstellen: 

• Ein Mega Menu mit TypoScript 
• Ein Mega Menu mit dem VHS Viewhelper 

Für beide Wege gibt es gute Gründe, warum man sie wählt. Bei der Variante eines hierarchischen Menus mit TypoScript hat man die volle Kontrolle über den gesamten Quelltext, aus dem die Webseite aufgebaut ist. Beim VHS Viewhelper greift man auf die Objekte zu, die uns diese Extension zur Verfügung stellt. Da wir die Fluid Templating Maschine von TYPO3 nutzen, können wir mit Conditions und Iterations Sonderfälle und Logiken einbauen. Mit dem VHS Viewhelper machen wir uns aber abhängig von einer Extension, was beim Upgrade einer TYPO3 Webseite zu einem Problem werden kann. 

Wir zeigen Ihnen beide Wege, ein Mega Menu in TYPO3 mit TypoScript und mit dem VHS Viewhelper aufzubauen. 

Besondere Menus für TYPO3

Neben der Navigation für die gesamte Webseite braucht man oft noch weitere Menus für besondere Zwecke: 

• Eine Breadcrumb-Navigation als Klickpfad zur aktuellen Seite 
• Einzelne Links zu besonderen Seiten wie Impressum, Kontakt oder die Datenschutzerklärung 
• Alle Seiten in einem Kapitel 
• Einen Sprachumschalter 
• Die vorhergehende oder nächste Seite 

Für alle diese Fälle bietet TYPO3 Menus an, die man in seine Webseite einbauen kann. Zusätzlich ist die Zahl der Inhaltselemente bei TYPO3 aber in den letzten Jahren auch gewachsen: Man hat nun die Möglichkeit, in eine Seite eine besondere Navigation einzubauen, z. B. die Übersicht aller Seiten im gleichen Kapitel. Früher musste man sich dafür ein eigenes Menu in TypoScript programmieren. 

Wir zeigen Ihnen Beispiele für besondere Menus in einer TYPO3 Webseite