Navigation mit TypoScript in Webseite gestalten

Jede Webseite, die mehr als ein Einseiter ist, braucht eine Navigation. TYPO3 stellt mit seiner Programmiersprache TypoScript eine Reihe von Möglichkeiten bereit, eine Navigation aufzubauen.

Beispiele für eine Navigation in TYPO3

Hier ein paar Beispiele aus der täglichen Praxis der Webentwicklung:

  • Eine Top Navigation in zwei Ebenen mit responsivem Framework
  • Eine Top Navigation in drei Ebenen mit gestaffeltem Layout und redaktionell pflegbaren Inhalten
  • Eine Brotkrümelnavigation für den Pfad zur aktuell angezeigten Seite
  • Besondere Links, die in jeder Seite bevorzugt angezeigt werden sollen
  • Ein Sprachumschalter mit Textlinks oder Flaggen zur Navigation zwischen mehreren Sprachen in der Webseite

In den folgenden Kapiteln bringen wir Ihnen näher, wie Sie eine Navigation mit TypoScript aufbauen.

Navigation als TypoScript Library

Navigation als TypoScript Library in TYPO3 ✔ Code in Fluid Partial

Die Navigation in einer TYPO3-Webseite wird im Allgemeinen über TypoScript aufgebaut. Dieser Teilbereich von TypoScript stellt mehrere Möglichkeiten bereit, eine Navigation aufzubauen. Zuvor sollte man sich allerdings überlegen, ob man TypoScript oder den VHS Viewhelper zum Aufbau der Navigation nutzt. Auch Verzeichnisstruktur der Webseite will überlegt sein. Meist ist der beste Web die Anlage mehrerer Libraries.

Mega Menu mit VHS Viewhelper

Mega Menu Navigation TYPO3 ✔ VHS Viewhelper, Fluid Template, Conditions

Neben der Einbindung einer TypoScript Library gibt es die Möglichkeit, eine Navigation über den VHS Viewhelper zu gestalten. Die Einbindung erfolgt dann nicht über TypoScript, sondern als Fluid Template. Ein großer Vorteil des VHS Viehelpers: Man kann die umfassenden Funktionen eines Fluid Template nutzen!

Navigation Bootstrap 3

Responsive Navigation TYPO3 ✔ Bootstrap ✔ TypoScript

Twitter Bootstrap 3 hat sich als Quasi-Standard bei der Generierung responsiver Webseite durchgesetzt. Das CSS und JavaScript Framework erlaubt es mit seinem Modell von row und col nicht nur, Inhalte einer Webseite so zu verschachteln, dass sie auf einem Desktop Rechner und einem Smartphone sichtbar angezeigt werden können. Eine weitere Stärke von Bootstrap ist es auch, eine Navigation so aufzubauen, dass sie bei einer bestimmten Breite eines Browserfensters umgeschaltet wird.

Navigation Bootstrap 4

Navigation Bootstrap 4 inTYPO3 ✔ mobiles Menu ✔ TypoScript Source Code

Die Version Bootstrap 4 des beliebten CSS und JavaScript Frameworks bietet die Möglichkeit der Einbindung einer Drop Down Navigation, die in responsivem Layout aufgebaut ist. 

Finden Sie hier den Quellcode für TypoScript, mit dem Sie eine responsive Navigation in der aktuellen Version von Bootstrap in Ihre TYPO3 Webseite einbauen können.

Mega Menu Navigation mit Bootstrap 4

Mega Menu Bootstrap 4 ✔ TypoScript Navigation ✔ TYPO3

Eine Mega Menu Navigation bietet eigene Vorteile gegenüber einer üblichen Navigation per Navbar: Man kann auf einen Blick mehr Inhalte erfassen, mehrere Ebenen darstellen und hat mehr Spielraum zur Gestaltung. Der Aufbau eines Mega Menu mit Bootstrap 4 ist per TypoScript möglich. Hier ein Beispiel für den Aufbau des Code in TypoScript.

MegaMenu Bootstrap 5 & MenuProcessor

Responsive Navigation TYPO3 Webseite ✔ Bootstrap 5 Mega Menu mit MenuProcessor

TYPO3 bietet in den letzten Versionen den MenuProcessor an, um eine Navigation zu erzeugen. In Zusammenhang mit Bootstrap 5 kann man ohne weitere Extension eine Mega Menu Navigation aufbauen. Erfahren Sie mehr über den Quellcode in Fluid, TypoScript, CSS und JavaScript für ein MegaMenu.

Navigation mit MenuProcessor

Navigation in TYPO3 über MenuProcessor ✔ TypoScript ✔ Fluid

Die Navigation einer Webseite mit TYPO3 konnte man bislang über TypoScript oder den VHS Vewhelper aufbauen. Mit dem  MenuProcessor bietet sich nun eine Möglichkeit, ein Menu mit Fluid Templates zu gestalten. Der LanguageMenuProcessor bietet einen Sprachumschalter aus dem TYPO3 Core. Mehr dazu in diesem Teil unseres TYPO3 Tutorials.

Navigation für Breadcrumb Menus und Listen

TypoScript Navigation TYPO3 ✔ Breadcrumb ✔ Brotkrümel

Neben einer Navigation für alle Seiten in einer Webseite gibt es besondere Menus, mit denen man eine Webseite nutzerfreundlich gestaltet. Hierzu gehören eine Breadcrumb oder Brotkrümel Navigation und Listenmenus für besondere Seiten

TypoScript Language Selector

Sprache in TYPO3 Webseite wechseln ✔ Language Selector TypoScript

TYPO3 bietet die Möglichkeit, eine Webseite in mehreren Sprachen zu betreiben. Dazu gibt es natürlich auch die Optionen, in jeder einzelnen Seite über einen Language Selector zwischen den verschiedenen Sprachen der Webseite zu wechseln. TypoScript bietet dazu zwei Optionen an: Einen Sprachumschalter per Text oder über die Einbindung von Länderflaggen.