Responsive Mega-Menüs mit mehreren Ebenen und DXPR Theme.

DXPR Theme baut sein Mega-Menü aus Drupals eigenem Menüsystem. Sie erstellen die Struktur unter Struktur › Menüs, das Theme macht daraus Dropdowns, die sich bei Wachstum in Spalten teilen, bis zu drei Ebenen tief verschachteln, sich per Hover oder Klick öffnen und auf Telefonen zu einem Hamburger-Menü zusammenfalten. Kein Mega-Menü-Modul, keine zusätzliche Konfiguration, und dieselben Links dienen Desktop und Mobilgeräten.

Diese Anleitung gilt für DXPR Theme 8.2.1 oder neuer auf Drupal 10.3 und Drupal 11. Die Screenshots stammen von einer Drupal-11.4-Site mit DXPR Theme 8.2.2 und einem dreistufigen Beispielmenü, aufgenommen im Oktober 2026.

So verhält sich das Menü

• Dropdowns durch Einrückung. Jeder Menülink mit untergeordneten Einträgen wird ein Dropdown. Ein übergeordneter Eintrag mit eigener Seite erhält ein geteiltes Steuerelement: Der Link navigiert, das Caret daneben öffnet das Dropdown. Ein übergeordneter Eintrag ohne Seite öffnet das Dropdown mit einem Klick.
• Spalten aus der Linkzahl. Ein Dropdown mit 8 oder mehr direkten untergeordneten Einträgen teilt sich in 2 Spalten, mit 15 oder mehr in 3, mit 21 oder mehr in 4 und mit 28 oder mehr in 5. Ab 3 Spalten erstreckt sich das Dropdown über die volle Breite des Headers: das Mega-Menü-Layout.
• Drei Ebenen. Ein Link in einem Dropdown kann selbst untergeordnete Einträge haben. Sie klappen im Dropdown auf, eingerückt unter ihrem übergeordneten Eintrag, sodass eine Struktur Services › Research › Laboratories ohne Abflachung funktioniert.
• Hover oder Klick. Auf einem Desktop mit Maus öffnen Dropdowns per Hover und immer per Klick. Wenn ein Dropdown im Menü eine dritte Ebene hat, schalten alle Dropdowns auf Klick-only um, damit sich ein Untermenü nie schließt, während der Zeiger dorthin wandert. Touchscreens und Fenster unter 992 Pixeln nutzen immer Klick.
• Tastatur und Screenreader. Pfeiltasten, Enter, Leertaste, Escape und Tab bewegen durch das Menü, und Schalter legen ihren Zustand offen mit aria-expanded, nach dem WAI-Muster für Disclosure-Navigation.
• Rechts-nach-links-Sprachen erhalten gespiegelte Dropdowns und Untermenüs.
• Telefone und Tablets. Unterhalb des mobilen Breakpoints, standardmäßig 1200 Pixel, zeigt der Header ein Hamburger-Symbol. Es öffnet das Menü über der Seite, und das Caret neben jedem übergeordneten Eintrag klappt seine untergeordneten Einträge an Ort und Stelle auf, auf der zweiten Ebene wie auf der ersten.

1. Die Struktur erstellen

1. Gehen Sie zu Struktur › Menüs › Hauptnavigation (/admin/structure/menu/manage/main).
2. Fügen Sie die benötigten Links hinzu mit Link hinzufügen. Geben Sie für einen übergeordneten Eintrag ohne eigene Seite <button> (eine native Tastatur-Schaltfläche) oder <nolink> als Link ein; beide öffnen das Dropdown.
3. Ziehen Sie die untergeordneten Einträge unter ihren übergeordneten Eintrag, sodass sie eine Ebene einrücken, und eine dritte Ebene eine weitere, dann drücken Sie Speichern.
4. Bearbeiten Sie jeden übergeordneten Link, aktivieren Sie Als erweitert anzeigen und drücken Sie Speichern. Um alle übergeordneten Einträge auf einmal auszuklappen, aktivieren Sie Alle Menülinks ausklappen in den Einstellungen des Hauptmenü-Blocks.

Das ist die gesamte Konfiguration. Drei Ebenen sind das Maximum, das die Dropdowns darstellen; tiefere Links gehören in die Seite, nicht ins Menü.

Die Menü-Verwaltungsseite: untergeordnete Einträge eingerückt unter ihrem übergeordneten Eintrag, eine dritte Ebene unter der zweiten.

Ein übergeordneter Link ohne Als erweitert anzeigen wird ohne seine untergeordneten Einträge dargestellt, außer auf seiner eigenen Seite.

2. Das Desktop-Menü prüfen

Öffnen Sie die Site und fahren Sie über das Caret neben einem übergeordneten Link oder klicken Sie es; ein übergeordneter Eintrag ohne Seite öffnet sich ebenfalls per Klick. Wenn das Menü eine dritte Ebene hat, öffnen Dropdowns nur per Klick. Eine kurze Liste öffnet sich als einspaltiges Dropdown; eine lange verteilt sich auf Spalten und ab drei Spalten über die volle Breite des Headers. Die Reihenfolge folgt der Gewichtung der Links auf der Menü-Verwaltungsseite, Spalte für Spalte.

Das Services-Dropdown auf dem Desktop, mit aufgeklappter dritter Ebene darin.

3. Das Mobilmenü prüfen

Verschmälern Sie den Browser unter den mobilen Breakpoint oder öffnen Sie die Site auf einem Telefon. Das Hamburger-Symbol öffnet das Menü über der Seite. Tippen Sie auf das Caret neben einem übergeordneten Eintrag, um seine untergeordneten Einträge an Ort und Stelle aufzuklappen, und auf das Caret neben einem Link der zweiten Ebene, um die dritte Ebene aufzuklappen. Nichts zu konfigurieren: Es ist dasselbe Menü.

Das Mobilmenü mit aufgeklapptem Services; das Caret neben Research öffnet die dritte Ebene.

4. Header und Menü gestalten

Alles zum Aussehen liegt auf dem Header & Main Menu-Tab der Theme-Einstellungen (Darstellung, dann Einstellungen neben DXPR Theme oder Ihrem Subtheme). Die Einstellungsseite zeigt eine Live-Vorschau, während Sie ändern.

• Layout: sieben Header-Layouts, von Normal (Logo left, Menu Right) über zentrierte gestapelte und Inline-Varianten bis zu Logo Right, Menu Left.
• Header Style: Normal oder Overlay um den Header mit transparentem Hintergrund über den Seiteninhalt zu legen, plus Header-Deckkraft, Höhe und Logo-Höhe. Fixed Position hält den Header beim Scrollen im Blick; wenn eingeschaltet, Sticky Header schaltet den Header nach einem Scroll-Offset auf eine geringere Höhe und eine eigene Deckkraft um.
• Main Menu Links: Dropdown Width (automatisch oder eine feste Breite von 100 bis 500 Pixeln), Font Style (normal, Großbuchstaben, fett oder Lead-Text), Link Spacing, und ein Hover Style aus Deckkraft, farbigem Hintergrund, farbigem Text oder einer Linie (oben oder unten, einschiebend von links, von rechts, aus der Mitte oder einblendend von oben).
• Mobile Header und Mobile Menu Options: der mobile Breakpoint (setzen Sie ihn auf das Maximum, 4100, um immer den mobilen Header zu nutzen), die mobile Header-Höhe und -Position, das Hamburger-Symbol (drei oder zwei Linien), seine Animation und die Ausrichtung des Menüs.
• Custom Header Colors: sechzehn Farbentscheidungen, Hintergrund und Text für Navbar, Header-Blöcke, Menü, Dropdowns und Mobilmenü, plus Hover-Hintergrund und -Text für die letzten drei, jeweils aus der Theme-Palette gewählt oder als eigener Wert gesetzt.

Jede Änderung ist eine Einstellung, kein CSS, übersteht also Theme-Updates. Ein Subtheme hat eigene Einstellungen; nehmen Sie diese Änderungen also auf der Einstellungsseite des Subthemes vor.

Von The Better Mega Menu oder einem anderen Menümodul kommend

Deinstallieren Sie das Modul und platzieren Sie den Core-Hauptnavigation-Block in der Navigation (Collapsible)-Region, falls er noch nicht dort ist; diese Region ist die, in die das Hamburger-Menü auf kleinen Bildschirmen einklappt. Alles, was das Modul mit Konfiguration tat, leistet DXPR Theme aus der Menüstruktur: Spalten, Ebenen, Hover und das Mobilmenü. Was nicht mitkommt, sind Inhalte im Dropdown, etwa Bilder oder Textblöcke; legen Sie diese auf die Landingpages, auf die das Menü verlinkt.

Lassen Sie Ihren KI-Agenten das Menü erstellen

Ein Menü ist eine Liste von Links mit Hierarchie: die Art strukturierter Aufgabe, die ein Coding-Agent gut beherrscht. Mit dem Drush-Webmaster-Skill installiert (drush wm:setup-ai), erstellt und ordnet Ihr Agent die Menülinks aus einem Briefing, etwa "a Services menu with Research, Teaching and Facilities, and three laboratories under Research". Mit dem Skill von DXPR Theme (drush dxt:setup-ai) setzt er auch Header-Layout, Sticky-Verhalten und Menüfarben passend zur Marke. Sie prüfen das Ergebnis auf der Site.