Responsieve multilevel-megamenu’s met DXPR Theme.

DXPR Theme bouwt zijn megamenu uit Drupal’s eigen menusysteem. Je maakt de structuur onder Structuur › Menu’s, het thema maakt er dropdowns van die bij groei in kolommen splitsen, drie niveaus diep nestelen, bij hoveren of klikken openen en op telefoons invouwen tot een hamburgermenu. Geen megamenu-module, geen extra configuratie, en dezelfde links bedienen desktop en mobiel.

Deze handleiding behandelt DXPR Theme 8.2.1 of later op Drupal 10.3 en Drupal 11. De screenshots komen van een Drupal 11.4-site met DXPR Theme 8.2.2 en een voorbeeldmenu met drie niveaus, genomen in oktober 2026.

Hoe het menu zich gedraagt

• Dropdowns uit inspringing. Elke menulink met kinderen wordt een dropdown. Een bovenliggende link met een eigen pagina krijgt een gesplitste bediening: de link navigeert, de caret ernaast opent de dropdown. Een bovenliggende link zonder pagina opent de dropdown met één klik.
• Kolommen uit het aantal links. Een dropdown met 8 of meer directe kinderen splitst in 2 kolommen, 15 of meer in 3, 21 of meer in 4 en 28 of meer in 5. Vanaf 3 kolommen rekt de dropdown uit tot de volle breedte van de header: de megamenu-lay-out.
• Drie niveaus. Een link in een dropdown kan zelf weer kinderen hebben. Ze vouwen uit in de dropdown, ingesprongen onder hun bovenliggende link, zodat een structuur Services › Research › Laboratories werkt zonder afvlakking.
• Hoveren of klikken. Op een desktop met muis openen dropdowns bij hoveren en altijd bij klikken. Zodra een dropdown in het menu een derde niveau heeft, schakelt elke dropdown naar alleen-klikken, zodat een submenu nooit sluit terwijl de aanwijzer ernaartoe reist. Touchscreens en vensters smaller dan 992 pixels gebruiken altijd klikken.
• Toetsenbord en screenreaders. Pijltjestoetsen, Enter, Spatie, Escape en Tab bewegen door het menu, en toggles tonen hun status met aria-expanded, volgens het WAI disclosure-navigatiepatroon.
• Talen van rechts naar links krijgen gespiegelde dropdowns en submenu’s.
• Telefoons en tablets. Onder het mobiele breekpunt, standaard 1200 pixels, toont de header een hamburgericoon. Het opent het menu over de pagina, en de caret naast elke bovenliggende link vouwt zijn kinderen ter plekke uit, op het tweede niveau zoals op het eerste.

1. Maak de structuur

1. Ga naar Structuur › Menu’s › Hoofdnavigatie (/admin/structure/menu/manage/main).
2. Voeg de links toe die je nodig hebt met Link toevoegen. Vul voor een bovenliggende link zonder eigen pagina <button> (een native toetsenbordknop) of <nolink> in als link; beide openen de dropdown.
3. Sleep de kinderen onder hun bovenliggende link zodat ze één niveau inspringen, en een derde niveau nog een, en druk dan op Opslaan.
4. Bewerk elke bovenliggende link, vink Als uitgevouwen weergeven aan en druk op Opslaan. Om elke bovenliggende link tegelijk uit te vouwen, vink je in plaats daarvan Alle menulinks uitvouwen aan in de instellingen van het hoofdmenublok.

Dat is de hele configuratie. Drie niveaus is het maximum dat de dropdowns renderen; diepere links horen in de pagina, niet in het menu.

De menubeheerpagina: kinderen ingesprongen onder hun bovenliggende link, een derde niveau onder het tweede.

Een bovenliggende link zonder Als uitgevouwen weergeven rendert zonder zijn kinderen, behalve op zijn eigen pagina.

2. Controleer het desktopmenu

Open de site en zweef over de caret naast een bovenliggende link, of klik erop; een bovenliggende link zonder pagina opent ook bij klikken. Heeft het menu een derde niveau, dan openen dropdowns alleen bij klikken. Een korte lijst opent als dropdown met één kolom; een lange spreidt zich over kolommen en vanaf drie kolommen over de volle breedte van de header. De volgorde volgt het gewicht van de links op de menubeheerpagina, kolom voor kolom.

De Services-dropdown op desktop, met het derde niveau erin uitgevouwen.

3. Controleer het mobiele menu

Versmal de browser onder het mobiele breekpunt of open de site op een telefoon. Het hamburgericoon opent het menu over de pagina. Tik op de caret naast een bovenliggende link om zijn kinderen ter plekke uit te vouwen, en op de caret naast een link op het tweede niveau om het derde niveau uit te vouwen. Niets te configureren: het is hetzelfde menu.

Het mobiele menu met Services uitgevouwen; de caret naast Research opent het derde niveau.

4. Stijl de header en het menu

Alles over de uitstraling staat op het tabblad Header & Main Menu van de thema-instellingen (Vormgeving, daarna Instellingen naast DXPR Theme of je subthema). De instellingenpagina toont een live preview terwijl je wijzigt.

• Layout: zeven headerlay-outs, van Normal (Logo left, Menu Right) via gecentreerde gestapelde en inline varianten tot Logo Right, Menu Left.
• Header Style: Normal, of Overlay om de header met een transparante achtergrond over de pagina-inhoud te plaatsen, plus de headerdekking, -hoogte en logohoogte. Fixed Position houdt de header in beeld tijdens het scrollen; daarmee aan schakelt Sticky Header de header na een scrollafstand naar een kleinere hoogte en eigen dekking.
• Main Menu Links: Dropdown Width (automatisch, of een vaste breedte van 100 tot 500 pixels), Font Style (normaal, hoofdletters, vet of leadtekst), Link Spacing, en een Hover Style van dekking, gekleurde achtergrond, gekleurde tekst of een rand (boven of onder, inschuivend van links, rechts, het midden of infadend van boven).
• Mobile Header en Mobile Menu Options: het mobiele breekpunt (zet het op het maximum, 4100, om altijd de mobiele header te gebruiken), de mobiele headerhoogte en -positie, het hamburgericoon (drie of twee lijnen), zijn animatie en de uitlijning van het menu.
• Custom Header Colors: zestien kleurkeuzes, achtergrond en tekst voor de navigatiebalk, headerblokken, menu, dropdowns en mobiel menu, plus hoverachtergrond en -tekst voor de laatste drie, elk uit het themapalet of als eigen waarde.

Elke wijziging is een instelling, geen CSS, dus hij overleeft thema-updates. Een subthema heeft eigen instellingen, dus voer deze wijzigingen door op de instellingenpagina van het subthema.

Van The Better Mega Menu of een andere menumodule

Verwijder de module en plaats het core-blok Hoofdnavigatie in de regio Navigatie (inklapbaar) van het thema als het er nog niet staat; in die regio vouwt het hamburgermenu in op kleine schermen. Alles wat de module met configuratie deed, doet DXPR Theme vanuit de menustructuur: kolommen, niveaus, hoveren en het mobiele menu. Wat niet meekomt is inhoud in de dropdown, zoals afbeeldingen of tekstblokken; zet die op de landingspagina’s waar het menu naartoe linkt.

Laat je AI-agent het menu bouwen

Een menu is een lijst met links en een hiërarchie: het soort gestructureerde taak waar een codingagent goed in is. Met de geïnstalleerde Drush Webmaster-skill (drush wm:setup-ai) maakt je agent de menulinks aan en ordent hij ze vanuit een briefing, zoals “een Services-menu met Research, Teaching en Facilities, en drie laboratoria onder Research”. Met de skill van DXPR Theme (drush dxt:setup-ai) stelt hij ook de headerlay-out, sticky-gedrag en menukleuren in passend bij het merk. Je beoordeelt het resultaat op de site.