Ein Mega-Menü in TYPO3 muss weder kompliziert sein noch eine zusätzliche Extension benötigen. Mit einem eigenen Seitenfeld, einem zusätzlichen Backend-Bereich und wenigen Zeilen TypoScript lässt sich eine flexible Navigation umsetzen, deren Inhalte Redakteure vollständig selbst pflegen können.
Gerade bei umfangreichen Websites reicht ein klassisches Dropdown-Menü häufig nicht mehr aus. Statt einer einfachen Liste von Unterseiten sollen mehrere Spalten, erklärende Texte, Bilder, Icons oder hervorgehobene Links innerhalb der Navigation erscheinen.
Die Herausforderung: Das Mega-Menü soll flexibel gestaltbar sein, sich nahtlos in das bestehende Sitepackage integrieren und für Redakteure möglichst einfach zu bedienen sein.
Ich zeige Ihnen, wie Sie das mit den vorhandenen TYPO3-Funktionen umsetzen können.
Die Idee: Mega-Menü-Inhalte direkt auf der Seite pflegen
Anstatt eine komplexe Menüstruktur in TypoScript zu definieren oder eine zusätzliche Extension einzusetzen, nutzen wir die vorhandenen Inhaltselemente von TYPO3.
Das Prinzip ist einfach:
- Jede Navigationsseite erhält ein zusätzliches Auswahlfeld für den Menütyp.
- Bei aktiviertem Mega-Menü erscheint ein eigener Inhaltsbereich im Backend.
- Redakteure gestalten diesen Bereich mit normalen TYPO3-Inhaltselementen.
- Die Hauptnavigation lädt die Inhalte der jeweiligen Seite automatisch in das Mega-Menü.
Der große Vorteil: Redakteure arbeiten mit den Inhaltselementen, die sie bereits kennen. Auch mehrspaltige Layouts, Bilder oder individuell entwickelte Content-Elemente lassen sich verwenden.
Für das Beispiel verwende ich ein Sitepackage mit dem Extension-Key sitepackage, eine vorhandene Fluid-Seitenausgabe und Bootstrap 5 für die Dropdown-Funktionalität.
1. Menütyp in den Seiteneigenschaften ergänzen
Zunächst benötigen wir eine Möglichkeit, den gewünschten Navigationstyp pro Seite festzulegen.
Dafür erweitern wir die pages-Tabelle über die TCA.
Datei: Configuration/TCA/Overrides/pages.php
<?php
use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
defined('TYPO3') or die();
ExtensionManagementUtility::addTCAcolumns('pages', [
'menutype' => [
'exclude' => true,
'label' => 'Subnavigation Typ',
'config' => [
'type' => 'select',
'renderType' => 'selectSingle',
'default' => 'none',
'items' => [
['label' => 'Keines', 'value' => 'none'],
['label' => 'Simples Dropdown', 'value' => 'dropdown'],
['label' => 'Mega Menü', 'value' => 'megamenu'],
],
],
],
]);
ExtensionManagementUtility::addToAllTCAtypes(
'pages',
'menutype',
'1,4',
'before:backend_layout'
);Damit stehen drei Optionen zur Verfügung:
- Keines: Ein normaler Navigationslink.
- Simples Dropdown: Ein klassisches Dropdown mit Unterseiten.
- Mega Menü: Ein individuell gestaltbarer Menübereich mit TYPO3-Inhaltselementen.
Die notwendige Datenbankdefinition ergänzen wir in der ext_tables.sql im Root-Verzeichnis unseres Sitepackages.
CREATE TABLE pages (
menutype varchar(255) DEFAULT 'none' NOT NULL
);Anschließend die Datenbankstruktur über die TYPO3-Datenbankanalyse aktualisieren und den Systemcache leeren.
Wichtig: Damit Redakteure den Menütyp ändern können, muss das neue Feld auch in den Berechtigungen der entsprechenden Backend-Benutzergruppen freigegeben werden.
2. Eigenen Inhaltsbereich für das Mega-Menü anlegen
Jetzt benötigen wir einen separaten Bereich, in dem die Inhalte des Mega-Menüs gepflegt werden können.
Dafür reservieren wir die Spaltenposition colPos = 101.
Die folgende Page-TSconfig definiert ein einfaches Backend-Layout mit einer Hauptspalte und ergänzt bei aktiviertem Mega-Menü einen zweiten Bereich.
Datei: Configuration/TSconfig/BackendLayouts/default.tsconfig
mod.web_layout.BackendLayouts {
default {
title = Eine Spalte
config {
backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = Inhalt
colPos = 0
}
}
}
}
}
}
}
}
[traverse(page, "menutype") == "megamenu"]
mod.web_layout.BackendLayouts.default.config.backend_layout {
rowCount = 2
rows {
2 {
columns {
1 {
name = Mega-Menü
colPos = 101
}
}
}
}
}
[END]Die Layoutdefinition muss anschließend in die Page-TSconfig eingebunden werden.
Bei einem Site-Set beispielsweise über:
Datei: Configuration/Sets/<Set>/page.tsconfig
@import 'EXT:sitepackage/Configuration/TSconfig/BackendLayouts/*.tsconfig'Das entsprechende Site-Set muss natürlich in der Website-Konfiguration eingebunden sein.
Wenn Sie bereits ein eigenes Backend-Layout verwenden, müssen Sie es nicht ersetzen. Ergänzen Sie eine weitere Zeile mit der Spaltenposition 101 und passen Sie rowCount entsprechend an.
Tipp: Ich verwende für spezielle Inhaltsbereiche bewusst eigene colPos-Werte. Dadurch lassen sich die Inhalte unabhängig vom regulären Seiteninhalt abrufen und ausgeben.
3. Navigation über den TYPO3 MenuProcessor bereitstellen
Für die Navigation nutzen wir den integrierten MenuProcessor von TYPO3.
Er liefert uns die Menüeinträge inklusive der Seitendaten und möglicher Unterseiten als Array für Fluid.
In unserem bestehenden FLUIDTEMPLATE ergänzen wir einen entsprechenden DataProcessor:
page.10.dataProcessing {
20 = menu
20 {
special = directory
special.value = 1
levels = 3
as = mainNavigation
}
}Die 1 bei special.value steht hier beispielhaft für die UID der Seite, deren Unterseiten unsere Hauptnavigation bilden.
Den Pfad page.10 müssen Sie gegebenenfalls an Ihr bestehendes TypoScript-Setup anpassen.
In Fluid steht uns anschließend die Variable mainNavigation zur Verfügung.
Besonders interessant sind dabei folgende Werte:
- {item.title} – Titel des Navigationseintrags
- {item.link} – URL der Seite
- {item.children} – Untergeordnete Menüpunkte
- {item.data.uid} – UID der Navigationsseite
- {item.data.menutype} – Unser individuell definiertes Seitenfeld
Damit können wir später direkt im Navigationstemplate entscheiden, welcher Menütyp ausgegeben werden soll.
4. Mega-Menü-Inhalte mit einem CONTENT-Objekt laden
Jetzt kommt der eigentliche Trick.
Wir erstellen ein TypoScript-Objekt, das die Inhaltselemente aus unserer reservierten Spalte 101 lädt.
Datei: Configuration/TypoScript/Helper/lib.menucontent.typoscript
lib.menucontent = CONTENT
lib.menucontent {
table = tt_content
select {
pidInList.field = pageuid
where = {#colPos} = 101
orderBy = sorting
}
}Das Besondere ist diese Zeile:
pidInList.field = pageuidDie Seiten-UID wird später dynamisch aus dem jeweiligen Navigationseintrag übergeben.
Dadurch lädt TYPO3 nicht die Inhalte der aktuell aufgerufenen Seite, sondern die Inhalte der Seite, zu der der entsprechende Menüeintrag gehört.
Das TypoScript-Objekt importieren wir anschließend in unser Setup:
@import 'EXT:sitepackage/Configuration/TypoScript/Helper/lib.menucontent.typoscript'Die eigentliche Darstellung übernimmt das bereits vorhandene Content-Rendering unseres Sitepackages.
Wir müssen also keine zusätzlichen Templates für die Menüinhalte erstellen.
5. Mega-Menü im Fluid-Navigationspartial ausgeben
Jetzt führen wir die einzelnen Komponenten zusammen.
Zunächst übergeben wir unsere Navigation an das entsprechende Partial:
<f:render
partial="Navigation/MainNavigation"
arguments="{mainNavigation: mainNavigation}"
/>Im Navigationspartial unterscheiden wir zwischen einem normalen Seitenlink, einem klassischen Dropdown und unserem Mega-Menü.
Datei: Resources/Private/Partials/Navigation/MainNavigation.html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<ul class="navbar-nav">
<f:for each="{mainNavigation}" as="item">
<li class="nav-item">
<f:if condition="{item.data.menutype} == 'megamenu'">
<f:then>
<a href="{item.link}"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false">
{item.title}
</a>
<ul class="dropdown-menu mega-menu">
<li>
<div class="container">
<f:cObject
typoscriptObjectPath="lib.menucontent"
data="{pageuid: item.data.uid}"
/>
</div>
</li>
</ul>
</f:then>
<f:else>
<f:if condition="{item.data.menutype} == 'dropdown' && {item.children}">
<f:then>
<a href="{item.link}"
class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
aria-expanded="false">
{item.title}
</a>
<ul class="dropdown-menu">
<f:for each="{item.children}" as="child">
<li>
<a href="{child.link}"
class="dropdown-item">
{child.title}
</a>
</li>
</f:for>
</ul>
</f:then>
<f:else>
<a href="{item.link}" class="nav-link">
{item.title}
</a>
</f:else>
</f:if>
</f:else>
</f:if>
</li>
</f:for>
</ul>
</html>Der entscheidende Teil ist der Aufruf unseres TypoScript-Objekts:
<f:cObject
typoscriptObjectPath="lib.menucontent"
data="{pageuid: item.data.uid}"
/>Hier wird die UID der Navigationsseite an das CONTENT-Objekt übergeben.
TYPO3 lädt daraufhin die Inhaltselemente aus colPos = 101 genau dieser Seite.
Wichtig: megamenu ist der Wert unseres Seitenfelds. Die CSS-Klasse mega-menu dient dagegen ausschließlich der Gestaltung.
Die vorhandene Logik für aktive Menüeinträge, Linkziele und Barrierefreiheit sollten Sie in Ihrem Projekt ergänzen oder beibehalten. Für produktive Websites empfiehlt sich außerdem eine semantisch passende Dropdown-Struktur mit einem echten Toggle-Button und sauberer Tastaturbedienung.
6. Das Mega-Menü im Backend befüllen
Die technische Umsetzung ist damit abgeschlossen.
Jetzt können die Redakteure das Mega-Menü vollständig über das TYPO3-Backend pflegen.
Dazu wird die gewünschte Navigationsseite geöffnet und in den Seiteneigenschaften unter Subnavigation Typ die Option Mega Menü ausgewählt.
Nach dem Speichern und gegebenenfalls der Auswahl des passenden Backend-Layouts steht der zusätzliche Inhaltsbereich zur Verfügung.
Dort können beliebige geeignete Inhaltselemente angelegt werden.
Beispielsweise:
- Mehrspaltige Container mit verschiedenen Themenbereichen
- Überschriften und Linklisten
- Bilder und Teaser
- Icons und Call-to-Action-Elemente
- Individuelle Content-Elemente des Sitepackages
Damit lassen sich auch komplexe Mega-Menüs realisieren, ohne dass die Redakteure HTML oder TypoScript bearbeiten müssen.
Bei mehrsprachigen Websites müssen die Menüinhalte entsprechend übersetzt werden.
7. Was Sie bei der Umsetzung beachten sollten
Bei der Umsetzung sollten Sie einige Punkte berücksichtigen.
Backend-Layouts: Die zusätzliche Spalte muss im tatsächlich verwendeten Backend-Layout vorhanden sein. Bei mehreren Layouts müssen Sie die Spalte gegebenenfalls in mehreren Definitionen ergänzen.
Mehrsprachigkeit: Prüfen Sie die Ausgabe übersetzter Inhaltselemente und die Sprachkonfiguration Ihrer Website.
Caching: TYPO3 übernimmt das Caching der gerenderten Inhalte. Nach Änderungen an Menüinhalten sollte geprüft werden, ob die Navigation auf allen Seiten zuverlässig aktualisiert wird.
Mobile Navigation: Wenn Sie für Smartphones eine separate Navigation verwenden, müssen Sie das Mega-Menü dort ebenfalls integrieren oder eine geeignete mobile Alternative vorsehen.
Barrierefreiheit: Achte auf Tastaturbedienbarkeit, sinnvolle Fokuszustände und ein korrektes Öffnen und Schließen des Menüs. Bootstrap stellt dafür bereits eine gute Grundlage bereit, ersetzt aber keine Prüfung der gesamten Navigation.
Fazit: Wenig Code, maximale Flexibilität
Ein flexibles Mega-Menü lässt sich in TYPO3 mit erstaunlich wenig Aufwand umsetzen.
Durch die Kombination aus einem eigenen TCA-Feld, einem zusätzlichen Backend-Bereich, dem MenuProcessor und einem CONTENT-Objekt entsteht eine Lösung, die sich problemlos in bestehende Sitepackages integrieren lässt.
Besonders überzeugend finde ich dabei die klare Trennung zwischen Technik und Inhalt: Die Navigation übernimmt die technische Logik, während Redakteure die Inhalte mit den gewohnten TYPO3-Werkzeugen gestalten.
Das Ergebnis ist ein individuelles, redakteursfreundliches Mega-Menü ohne zusätzliche Drittanbieter-Extension.
Und genau solche Lösungen zeigen, wie flexibel TYPO3 bereits mit seinen Bordmitteln ist.
Sie benötigen Unterstützung bei einer individuellen TYPO3-Navigation, einem Sitepackage oder einer eigenen Erweiterung?
Melden Sie sich gern bei mir. Ich unterstütze Sie bei der Planung und technischen Umsetzung Ihrer TYPO3-Projekte.