Mega Menu for TYPO3

Komplexe Website-Strukturen mit 200+ Seiten brauchen eine Navigation, die mehr zeigt als Textlisten

Websites mit drei oder mehr Navigationsebenen und über 200 Seiten stossen mit einem Standard-Dropdown-Menü an Grenzen. Besucher klicken sich durch verschachtelte Listen, verlieren die Orientierung und brechen ab. Ein Mega-Menu löst das Problem: Beim Hover oder Klick auf einen Hauptpunkt öffnet sich ein mehrstufiges Panel mit Spalten, Bildern, Teasern und direkten CTAs. Die megamenu-Extension bringt dieses Navigationskonzept als konfigurierbares Content-Element in TYPO3. Redakteure pflegen die Menü-Inhalte (Bilder, Teaser-Texte, Links) im Backend, die Extension rendert das Mega-Menu im Frontend.

Für Enterprise-Websites mit komplexem Produktportfolio, Branchen-Portale mit regionalen Unterbereichen oder Hochschulen mit Fakultätsstrukturen ist ein Mega-Menu nicht optional, sondern Voraussetzung für brauchbare Navigation. Die Herausforderung liegt nicht in der Anzeige, sondern in Barrierefreiheit, Responsive-Verhalten und Performance.

Typical use cases include Unternehmenswebsites, E-Commerce und Hochschulportale

Das Standardszenario ist die Unternehmenswebsite mit 5 bis 8 Hauptkategorien und jeweils 10 bis 30 Unterpunkten. Ein Maschinenbauer zeigt unter “Produkte” fünf Produktlinien mit je sechs Produktgruppen, ergänzt durch ein Keyvisual und einen Link zum Produktkonfigurator. Unter “Branchen” erscheinen acht Branchenseiten mit Kurztext und Icon. Das Mega-Menu macht diese Struktur auf einen Blick erfassbar, ohne dass der Besucher sich durch Unterlisten klicken muss.

Zweites Szenario: E-Commerce-Websites mit breitem Sortiment. Ein Online-Shop mit 500+ Produkten in 20 Kategorien zeigt im Mega-Menu die Hauptkategorien mit Unterkategorien, Bestsellern und Aktionslinks. Die visuelle Darstellung mit Produktbildern im Menü steigert die Klickrate auf Kategorie-Seiten um geschätzte 10 bis 20% gegenüber reinen Textlisten.

Drittes Szenario: Hochschulportale mit Fakultäts- und Institutsstruktur. Eine Universität mit 12 Fakultäten und dutzenden Instituten braucht eine Navigation, die sowohl die organisatorische Struktur als auch funktionale Bereiche (Studium, Forschung, Karriere) abbildet. Das Mega-Menu zeigt unter “Studium” die Studiengangsuche, Bewerbungsinformationen und Fristen, unter “Fakultäten” die Institute mit direkten Links zu Mitarbeitern und Forschungsprojekten.

Technical architecture combines TYPO3-Seitenbaum mit zusätzlichen Content-Elementen

Die megamenu-Extension erweitert die TYPO3-Navigation um ein Content-Element, das im Seitenbaum als Menü-Konfiguration angelegt wird. Jeder Hauptmenü-Punkt kann ein Mega-Menu-Panel zugeordnet bekommen, das aus Spalten besteht. Jede Spalte enthält Links, Bilder, Rich-Text-Blöcke oder benutzerdefinierte Content-Elemente.

Die Rendering-Logik erzeugt ein HTML-Konstrukt aus verschachtelten Listen und div-Containern, das per CSS als mehrstufiges Panel gestylt wird. Die JavaScript-Komponente steuert das Öffnen und Schliessen (Hover auf Desktop, Klick auf Touch-Geräten) und die Keyboard-Navigation (Tab, Enter, Escape, Pfeiltasten). ARIA-Attribute (aria-expanded, aria-haspopup, role=“menu”) machen das Menu für Screenreader navigierbar.

Die Performance-Implikation ist relevant: Ein Mega-Menu mit Bildern und Teasern für 8 Hauptpunkte generiert deutlich mehr HTML als ein Standard-Menü. Lazy Loading für Bilder im Mega-Menu ist Pflicht, damit die initiale Seitenladezeit nicht leidet. Gosign empfiehlt, Mega-Menu-Inhalte erst beim Hover per AJAX nachzuladen, wenn das Panel mehr als 5 Bilder pro Hauptpunkt enthält.

Common problems involve Accessibility, Mobile-Verhalten und Redaktions-Komplexität

Problem eins: Accessibility-Mängel. Viele Mega-Menu-Implementierungen sind mit der Tastatur nicht navigierbar. Tab springt über das gesamte Panel, statt durch die Menüpunkte zu iterieren. Escape schliesst das Panel nicht. Focus-Styles fehlen. Die Lösung: WAI-ARIA Authoring Practices für Navigation Menus befolgen, Keyboard-Handling explizit implementieren und die Focus-Management-Logik mit einem Screenreader testen (NVDA, VoiceOver).

Problem zwei: Mobile-Verhalten. Auf Smartphones wird ein Mega-Menu zum Hindernis, weil das Panel den gesamten Bildschirm einnimmt und der Besucher nicht mehr zum Seiteninhalt zurückkehren kann. Die Lösung: Auf Mobilgeräten das Mega-Menu durch eine Akkordeon-Navigation ersetzen, die die gleichen Inhalte in einer vertikalen Struktur darstellt. Die Umschaltung erfolgt über CSS Media Queries und eine separate JavaScript-Logik für Touch-Geräte.

Problem drei: Redaktions-Komplexität. Redakteure müssen Bilder, Texte und Links für jedes Mega-Menu-Panel pflegen. Ohne klare Richtlinien entstehen inkonsistente Panels: Eins hat vier Spalten mit Bildern, das nächste eine Spalte mit 30 Links. Die Lösung: Eine Content-Guideline, die maximale Spaltenanzahl, Bildformate und Textlängen pro Panel definiert. Gosign liefert diese Guideline als Teil des Mega-Menu-Projekts mit und konfiguriert die Backend-Felder so, dass Redakteure innerhalb der definierten Grenzen arbeiten (z.B. maximal 4 Spalten, maximal 8 Links pro Spalte, Bildformat 16:9).

Ein weiteres Thema ist die SEO-Implikation: Mega-Menus mit vielen Links erhöhen die Gesamtzahl der internen Links pro Seite. Wenn jede Seite 200+ Links im Mega-Menu hat, verdünnt das den Link-Juice, der an einzelne Zielseiten fliesst. Die Lösung: Mega-Menu-Inhalte selektiv laden und nicht alle Panels gleichzeitig im HTML rendern, oder strategisch unwichtige Links mit tabindex=“-1” von der Crawler-Navigation ausschliessen.

TYPO3 v12 requires Anpassungen, Custom-Implementierungen include langfristig wartbarer

Die megamenu-Extension muss bei einem Upgrade auf TYPO3 v12 angepasst werden, da sich die TCA-Konfiguration und das Content-Element-Handling geändert haben. Für v13 liegt noch keine offizielle Unterstützung vor. Gosign baut Mega-Menus in neuen Projekten als Custom-Komponente im Site-Package, die den TYPO3-Seitenbaum als Datenquelle nutzt und die Menü-Konfiguration über Page Properties oder Backend Layouts steuert. Das eliminiert die Abhängigkeit von der Extension und gibt volle Kontrolle über HTML-Struktur, Accessibility und Performance.