Navigationen

MegaMenu, Sektionsindex, Overlay, Sidebar und Abstract — fünf Navigationstypen aus einer Komponente.

Main-Navigation

Die Hauptnavigation oben auf der Seite ist die Standard-Implementierung. Sie liest die Seitenhierarchie ab dem konfigurierten entryLevel und rendert bis levels tief. Sub-Items werden je nach menuType als klassisches Dropdown oder als MegaMenu dargestellt.

Live-Beispiel: Die Navigation oben auf dieser Seite (Über · Extensions · Elemente · Seitenlayouts) ist die aktive Main-Navigation. Sie nutzt menuType = smartmenus für Keyboard-Navigation und Touch-Support.

MegaMenu

Ein MegaMenu ersetzt das klassische Dropdown durch eine vollbreite Panel-Ansicht mit beliebigen Spalten und Inhaltselementen. Aufbau über die CTypes t3bs_megamenu + t3bs_megamenu_item innerhalb der entsprechenden Container-Page.

Die MegaMenu-Page-ID wird in der Site-Konfiguration unter navigation.main.megaMenuPid hinterlegt; pro Menüpunkt kann der Typ via t3bs_megamenu_item.type (none / classic / mega) gesetzt werden.

Live-Beispiel: Klicke oben auf Elemente — das öffnet ein 5-spaltiges MegaMenu mit Kategorien (Layout, Inhalt, Interaktion, Visuell, Komponenten).

Section-Index (OnePager-Menu)

Auf OnePager-Seiten zeigt der Section-Index eine inhaltsbasierte Navigation: jeder im Inhaltsverzeichnis sichtbare CE-Header wird zu einem Anker-Link. Per Smooth-Scroll springt die Seite zum entsprechenden Abschnitt; mit IntersectionObserver wird der aktive Eintrag highlighted.

Konfiguration über das Feld sectionIndex pro CE (Backend → CE → Erscheinungsbild → "In OnePager-Index aufnehmen") sowie über das TypoScript tt_content.onepage_menu im Template.

Beispiel: Die Quick-Nav-Leiste oben auf dieser Seite ist ein einfacher Section-Index — alle Sektionen sind als Anker-Buttons verlinkt.

Overlay-Menü (Mobile)

Das Overlay-Menü ist die mobile Variante der Hauptnavigation: ein Vollbild-Overlay, das per Burger-Icon geöffnet wird. Beliebige CEs können als Inhalt eingebunden werden (Quick-Links, Kontakt-Block, Sprache-Switcher, Social-Icons).

Die Page-uid des Overlay-Inhalts wird über navigation.main.overlayMenuPid hinterlegt; alternativ kann mmenu als menuType genutzt werden (Slide-In von links).

Test: Verkleinere das Browser-Fenster auf Tablet-/Mobile-Breite — der Burger-Button erscheint und öffnet das Overlay-Menü.

Sub-Navigation / Sidebar

Die Sub-Navigation erscheint auf zweispaltigen Layouts als Sidebar mit den Unterseiten der aktuellen Ebene. Sie ist eigenständig konfigurierbar (eigener entryLevel, levels, showIcon, excludeUidList) und kann pro Seite über Backend-Layouts ein- oder ausgeblendet werden.

Beispiel: Wechsel auf die Seite Seitenlayouts → Zweispaltig, um die Sidebar in Aktion zu sehen.

Abstract-Menü

Das Abstract-Menü rendert eine Liste von Seiten als Cards oder Listen-Items mit Vorschaubild, Titel und Beschreibungstext. Vier Layouts stehen zur Verfügung:

  • List (Standard) — vertikale Liste mit Bildvorschau links
  • Grid 4-spaltig — Card-Grid für viele Items
  • Grid 6-spaltig — kompakte Card-Übersicht
  • Grid 3-spaltig — größere Cards für Featured-Listen

CType menu_abstract, Layout über das Feld layout wählbar (Werte: 0=List, 430-433=Grid-Varianten).

Konfiguration über Site-Settings

Alle Navigationen werden zentral über die Site-Settings konfiguriert. Wichtigste Settings:

navigation.main.menuType

smartmenus (default) / bs5 / mmenu — Rendering-Engine

navigation.main.megaMenuPid

Page-uid der MegaMenu-Inhaltsdatenquelle

navigation.main.overlayMenuPid

Page-uid für Overlay-Menü-Inhalt

navigation.main.entryLevel / .levels

Start-Ebene und Tiefe der Hauptnavigation

navigation.main.excludeUidList

Komma-Liste von Page-uids, die ausgeblendet werden

navigation.sub.enabled / .entryLevel

Sub-Navigation/Sidebar einblenden + Konfiguration

navigation.mobile.menuType

Mobile-Variante (typisch mmenu oder overlay)

navigation.mobile.useAjax

Mobile-Menü via Ajax nachladen (Performance-Trick)

navigation.meta.enabled

Meta-Navigation oberhalb des Headers

navigation.footer.enabled

Footer-Navigation (siehe Footer-Demo)