Besucher sollten nicht raten müssen, wohin sie den Cursor bewegen müssen, um den richtigen Bereich zu finden. Hat eine Website mehr als sechs zentrale Seiten, wird ein Standard-Dropdown-Menü zum Geschicklichkeitstest: eine falsche Bewegung, und der Nutzer landet wieder am Anfang. Ein Mega-Menü löst dieses Problem radikal.

Ein Mega-Menü ist ein breites, aufklappbares Menü, in dem alle Kategorien auf einen Blick sichtbar sind, ohne verschachtelte Untermenüs und langes Suchen nach Links. Große Marktplätze, Nachrichtenportale und Content-Projekte setzen diesen Ansatz nicht aus ästhetischen Gründen ein, sondern weil er funktioniert: Ein Besucher erreicht die gewünschte Ebene-drei-Rubrik mit einem Klick.

Das Problem: WordPress unterstützt Mega-Menüs nicht standardmäßig. Selbst wenn ein Theme eine integrierte Option bietet, ist diese fast immer auf wenige Spalten ohne echte Anpassungsmöglichkeiten beschränkt. Für ein vollwertiges Mega-Menü mit visuellem Editor, responsiver Version und präzisen Einstellungen benötigen Sie das richtige Werkzeug, und hier kommen Elementor und The Plus Addons ins Spiel.

💡 Kurzüberblick:

• Aktivieren Sie das TP Navigation Menu-Widget in The Plus Addons und erstellen Sie eine Mega-Menü-Vorlage über den visuellen Editor von Elementor.
• Konfigurieren Sie das standardmäßige WordPress-Menü (Design, Menüs) und fügen Sie die erstellte Vorlage als Eintrag hinzu, der das Mega-Menü aufklappt.
• Erstellen Sie eine Header-Vorlage über den Elementor Theme Builder und platzieren Sie darin das Navigation Menu-Widget von The Plus Addons.
• Konfigurieren Sie das responsive Verhalten: separates Menü oder separate Vorlage für mobile Besucher, Breakpoint, Erscheinungsbild.

Wann Ihre Website ein Mega-Menü benötigt

Ein Mega-Menü ist keine Universallösung für jedes Projekt. Wenn eine Website jedoch mehr als sechs Bereiche mit Unterkategorien hat, stößt die Standardnavigation an ihre Grenzen. Forscher der Nielsen Norman Group für Nutzererfahrung bringen es auf den Punkt: „Mega-Menüs eignen sich gut für die Website-Navigation… Dies ist eine ausgezeichnete Designentscheidung, wenn Sie eine große Anzahl von Optionen unterbringen oder untergeordnete Seiten auf einen Blick zeigen müssen."

In Onlineshops ist ein Mega-Menü praktisch Standard. Produktkategorien, Unterkategorien, Filter, all das muss dem Besucher sofort gezeigt werden und nicht hinter einer Abfolge von Hover-Effekten versteckt sein:

Das ist ein gewaltiger Fortschritt gegenüber dem „alten" Ansatz, zusammengesetzten Menüs mit kaskadierenden Untermenüs, bei denen der Besucher eine Scharfschützenpräzision in seinen Bewegungen benötigte und ein Fehler ihn an den Anfang zurückwarf:

So setzen große Onlineshops Mega-Menüs ein:

Etsy verfolgt einen ähnlichen Ansatz: Die Kategorien Handgemachtes, Vintage und Material sind in einem Panel aufgeklappt, der Käufer sieht das gesamte Sortiment auf einen Blick:

Doch Mega-Menüs sind nicht nur für den E-Commerce geeignet. Nachrichtenseiten, Magazine, Content-Publisher, Unternehmensportale, überall dort, wo eine Fülle von Informationen auf mittlerer und unterer Ebene zugänglich gemacht werden muss, funktioniert diese Technik:

Yelp gruppiert Restaurants, Haushaltsdienstleistungen und Autoservices in intuitive Blöcke und spart Besuchern so Suchzeit:

Website-Builder Tilda setzt ein Mega-Menü ein, um Vorlagentypen und Portfolio-Beispiele darzustellen und neuen Nutzern die Orientierung zu erleichtern:

Die Reise-Website Duvine präsentiert Reiseziele in einem übersichtlichen Raster, sodass man nicht durch einen Katalog scrollen muss:

Die Agentur Quasar platziert Portfolio, Leistungen und Kontakte in einem Mega-Menü und macht die Navigation so zu einer Leistungsschau:

Was Sie für die Erstellung eines Mega-Menüs benötigen

Elementor bietet einen visuellen Editor mit Drag-and-Drop und allen Gestaltungsmöglichkeiten für den Aufbau eines Mega-Menüs. Um jedoch die eigentliche Funktionalität hinzuzufügen, Hover-Ausklappeffekt, Positionierung, responsives Umschalten,, benötigen Sie ein Drittanbieter-Plugin.

Konkret: The Plus Addons for Elementor. Dies ist eine leistungsstarke Erweiterung mit über 120 Widgets, darunter das TP Navigation Menu-Widget, das alle Szenarien abdeckt: horizontale, vertikale und Sidebar-Mega-Menüs, Umschalter und responsive Optionen.

Was The Plus Addons bietet:

• Volle Elementor-Integration. Das Widget wurde speziell für Elementor geschrieben und ist mit allen anderen Widgets und Builder-Funktionen kompatibel; Sie müssen keine neue Oberfläche erlernen.
• Pixelgenaue Responsivität. Sie können unterschiedliche Menüs oder sogar verschiedene Mega-Menü-Vorlagen für Desktop- und Mobilgeräte festlegen.
• Browserübergreifende Unterstützung. Alle Besucher erhalten unabhängig vom Browser ein gleichbleibend hochwertiges Erlebnis.
• Flexible Anpassung. Einstellungen für Größe, Ausrichtung, Label-Farben, Icons, alles über das gewohnte Elementor-Panel.

Für die vollständige Header-Funktionalität benötigen Sie außerdem Elementor Pro; dessen Theme Builder ermöglicht es Ihnen, eine individuelle Header-Vorlage zu erstellen und das Navigation Menu-Widget darin zu platzieren.

So erstellen Sie ein Mega-Menü in Elementor: Schritt-für-Schritt-Anleitung

Der gesamte Prozess gliedert sich in fünf Schritte. Stellen Sie sicher, dass drei Plugins installiert und aktiviert sind:

• Elementor (kostenlos)
• Elementor Pro Version, für den Theme Builder und individuelle Header
• The Plus Addons for Elementor, die kostenlose Version ist auf WordPress.org verfügbar, für das Navigation-Menü-Widget benötigen Sie jedoch eine Pro-Lizenz von der offiziellen Website

Schritt 1. Aktivieren Sie das TP Navigation Menu Widget

Gehen Sie im WordPress-Adminbereich zu ThePlus Settings → Plus Widgets und aktivieren Sie das TP Navigation Menu Widget:

Nach der Aktivierung erscheint in der Seitenleiste des Adminbereichs ein neuer benutzerdefinierter Beitragstyp Plus Mega Menu. Dies ist der Speicherort für alle Ihre Mega-Menü-Vorlagen.

Schritt 2. Erstellen Sie eine Mega-Menü-Vorlage in Elementor

Gehen Sie zu Plus Mega Menu → Add New. Geben Sie der Vorlage einen aussagekräftigen Namen, das ist hilfreich, wenn Sie verschiedene Mega-Menüs an verschiedenen Stellen der Website einsetzen. Klicken Sie auf Edit with Elementor:

Jetzt befinden Sie sich im visuellen Editor von Elementor. Bauen Sie das Mega-Menü-Layout wie eine normale Seite auf: ein übergeordneter Abschnitt, der die volle Breite des Mega-Menüs einnimmt, darin Spalten für jeden semantischen Block und in den Spalten beliebige Elementor-Widgets: Überschriften, Listen, Bilder, Schaltflächen. Der Elementor Navigator (Strukturpanel unten links) hilft, die Hierarchie der Abschnitte und Spalten zu visualisieren.

Wenn das Design fertig ist, speichern und veröffentlichen Sie die Vorlage.

Schritt 3. Konfigurieren Sie das WordPress-Navigationsmenü

Nun müssen Sie die erstellte Vorlage mit dem tatsächlichen Menü der Website verknüpfen. Gehen Sie zu Design → Menüs. Falls noch kein Menü existiert, erstellen Sie eines.

Fügen Sie zunächst reguläre übergeordnete Elemente für Schlüsselbereiche über Benutzerdefinierte Links hinzu. Dies sind Elemente, die kein Mega-Menü ausklappen, sondern einfach zu Seiten führen.

Klappen Sie dann den Bereich Plus Mega Menu in der Seitenleiste zum Hinzufügen von Elementen aus und wählen Sie die im vorherigen Schritt erstellte Vorlage aus. Sie wird als Menüpunkt hinzugefügt, beim Darüberfahren wird das Mega-Menü ausgeklappt.

Wenn der Bereich Plus Mega Menu nicht angezeigt wird, blendet WordPress ihn aus. Klicken Sie oben rechts auf Ansicht anpassen und aktivieren Sie das Kontrollkästchen Plus Mega Menu:

Konfigurieren Sie für das hinzugefügte Element Größe und Ausrichtung. Es stehen drei Größenoptionen zur Verfügung:

• Standard, maximale Breite in Pixeln.
• Container, entsprechend der Breite des Website-Containers.
• Volle Breite, das Mega-Menü erstreckt sich über die gesamte Bildschirmbreite.

Hier konfigurieren Sie auch die Elementbeschriftung, Beschriftungsfarben und Symbole:

Schritt 4. Erstellen Sie eine Header-Vorlage im Theme Builder

Nun muss das Mega-Menü im Header der Website platziert werden. Dafür wird der Theme Builder verwendet, der Teil von Elementor Pro ist.

Gehen Sie zu Templates → Theme Builder und erstellen Sie eine neue Header-Vorlage (oder bearbeiten Sie eine bestehende). Sie können eine fertige Header-Vorlage wählen oder Ihre eigene von Grund auf neu erstellen. Konfigurieren Sie über die Anzeigebedingungen von Elementor Pro, wo dieser Header angezeigt werden soll, auf der gesamten Website oder nur auf bestimmten Seiten.

Fügen Sie im Header-Editor das TP Navigation Menu Widget von The Plus Addons hinzu:

Wählen Sie in den Widget-Einstellungen die Menüausrichtung: horizontal, vertikal oder vertikale Seitenleiste:

Wählen Sie dann in der Option Select Menu das Menü aus, das Sie in Schritt 3 konfiguriert haben:

Weitere Gestaltungsparameter finden Sie auf dem Tab Style: Farben, Schriftarten, Abstände, Hover-Effekte.

Schritt 5. Responsives Verhalten konfigurieren

Der letzte Schritt, die mobile Version. Klappen Sie die Mobile Menu-Einstellungen auf dem Tab Content des Navigation Menu Widgets auf. Aktivieren Sie die Option Responsive Mobile Menu und legen Sie den Breakpoint fest, also die Bildschirmbreite, bei der das mobile Layout greift:

Wählen Sie im Dropdown Menu Content aus, was mobilen Besuchern angezeigt werden soll: dasselbe Menü wie auf dem Desktop, ein separates Menü ohne Mega-Menü (angelegt unter Design → Menüs) oder eine komplett eigenständige, in Elementor erstellte Vorlage.

Fertig. Sie haben soeben ein responsives Mega-Menü auf WordPress mit Elementor und The Plus Addons erstellt.

Video: Einrichtung aus erster Hand

Theorie ist gut, aber eine Live-Demonstration spart eine halbe Stunde Ausprobieren. Dieses Video zeigt den kompletten Einrichtungsprozess für das Navigation Menu Widget von The Plus Addons für Elementor, von der Aktivierung bis zum funktionierenden Mega-Menü auf der Website:

⁉️🤔 Häufig gestellte Fragen

Wird Elementor Pro benötigt, um ein Mega-Menü zu erstellen?

Ja, Elementor Pro ist erforderlich. Die kostenlose Version von Elementor enthält keinen Theme Builder, das Werkzeug zum Erstellen eigener Header-Vorlagen, ohne das Sie kein Mega-Menü-Widget im Website-Header platzieren können. Standard-WordPress-Themes bieten keinen Bereich, um ein Elementor-Widget in die Navigation einzufügen. Die Elementor Pro-Lizenz beginnt bei 59 $ pro Jahr für eine Website.

Ist The Plus Addons kostenlos oder kostenpflichtig?

The Plus Addons hat eine kostenlose Version auf WordPress.org mit einem Basissatz an Widgets. Das TP Navigation Menu-Widget, das für Mega-Menüs zuständig ist, ist jedoch nur in der Pro-Version verfügbar. Eine Pro-Lizenz erwerben Sie auf der offiziellen theplusaddons.com-Website; sie umfasst über 120 Widgets, über 1000 Vorlagen und vorrangigen Support. Ein alternativer Weg ist das integrierte Mega-Menü von Elementor Pro (erschienen in Version 3.12+), das jedoch an Flexibilität unterlegen ist: keine Sidebar und kein vertikales Mega-Menü, weniger Einstellungen zur Reaktionsfähigkeit.

Kann man mehrere verschiedene Mega-Menüs auf einer Website erstellen?

Ja. The Plus Addons erlaubt es Ihnen, beliebig viele Mega-Menü-Vorlagen über Plus Mega Menu → Add New zu erstellen. Jede Vorlage wird unabhängig in Elementor gebaut. In den WordPress-Menüs (Design → Menüs) fügen Sie die benötigten Vorlagen als separate Einträge hinzu, zum Beispiel ein „Katalog"-Mega-Menü für den Punkt „Produkte" und ein „Leistungen"-Mega-Menü für den Punkt „Leistungen". Über die Anzeigebedingungen von Elementor Pro können Sie auf verschiedenen Seiten unterschiedliche Header anzeigen: einen Header für den Shop, einen anderen für den Blog.

Was tun, wenn das Mega-Menü auf mobilen Geräten nicht angezeigt wird?

Prüfen Sie drei Einstellungen im Navigation Menu Widget. Erstens, ob die Option Responsive Mobile Menu aktiviert ist (Tab Content → Mobile Menu). Zweitens, ob der Breakpoint korrekt gesetzt ist (Breite in Pixeln, bei der das mobile Layout aktiv wird). Drittens, ob unter Menu Content eine bestimmte Quelle ausgewählt ist: Wenn dort „Same as desktop" eingestellt ist, das Desktop-Menü aber zu breit für den mobilen Bildschirm ist, passt es nicht. Lösung: Erstellen Sie ein separates, vereinfachtes Menü für Mobilgeräte unter Design → Menüs und wählen Sie es im Dropdown Menu Content aus.

Verursacht The Plus Addons Konflikte mit anderen Elementor-Plugins?

Äußerst selten. The Plus Addons ist speziell für Elementor geschrieben und wird mit jedem größeren Update auf Kompatibilität getestet. Im Mai 2026 erhielt das Plugin zwei Tage nach der Veröffentlichung die Kompatibilität mit WordPress 7.0, das zeigt das Niveau des Supports. Sollte dennoch ein Konflikt auftreten, deaktivieren Sie zunächst nacheinander andere Elementor-Addons, um den Verursacher zu finden. Meistens werden Probleme nicht von Haupt-Plugins verursacht, sondern von obskuren Erweiterungen mit ungetestetem CSS.

Erstellen Sie ein Mega-Menü, das für Sie arbeitet

Ein Mega-Menü ist keine Dekoration, sondern ein Navigationswerkzeug, das das Chaos aus dreißig Seiten in eine verständliche Struktur verwandelt. Der Besucher sieht alles auf einmal, erreicht den gewünschten Bereich mit einem Klick und verlässt die Website nicht aus Frustration.

Mit Elementor und The Plus Addons erhalten Sie visuelle Kontrolle über jeden Pixel des Mega-Menüs, ohne eine einzige Codezeile. Die fünf oben beschriebenen Schritte, Aktivierung, Vorlage, Menü, Header, Responsivität, decken den gesamten Zyklus von der Idee bis zur funktionierenden Lösung in einer bis anderthalb Stunden ab.

Wählen Sie das Werkzeug passend zur Aufgabe. Ist die Website einfach und das Budget begrenzt, genügt das integrierte Mega-Menü von Elementor Pro. Ist das Projekt komplex, mit mehreren Arten von Mega-Menüs, unterschiedlicher mobiler und Desktop-Navigation, installieren Sie The Plus Addons und schauen Sie nicht zurück.