Navigation mit TypoScript in Webseite gestalten

Jede Webseite, die mehr als ein Einseiter ist, braucht eine Navigation. TYPO3 stellt mit einer 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

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

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

Twitter Bootstrap hat sich als Quasi-Standard bei der Generierung responsiver Webseite durchgesetzt. Das 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.

Mega Menu Navigation mit Bootstrap 4

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.

Navigation für Breadcrumb Menus und Listen

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

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.

Thomas Berscheid, 02.12.2019 22:59
^