---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-theme-leren/low-code-thema-aanpassing/responsieve-multilevel-megamenus'
title: 'Responsieve multilevel-megamenu’s met DXPR Theme | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T06:19:50+00:00'
updated: '2026-10-24T01:14:23+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '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.'
tags:
  - 'Low-code theme customization'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T01:14:23+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': FAQPage
      mainEntity:
        -
          '@type': Question
          name: 'Heb ik een megamenu-module nodig bij DXPR Theme?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Nee. Kolommen, drie niveaus, hover- en klikgedrag, toetsenbordondersteuning en het mobiele menu komen uit het thema. Je hebt alleen een genest menu nodig met <em>Als uitgevouwen weergeven</em> op de bovenliggende links, of <em>Alle menulinks uitvouwen</em> op het menublok.</p>'
        -
          '@type': Question
          name: 'Waarom opent mijn dropdown alleen bij klikken?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Omdat ergens in het menu een dropdown een derde niveau heeft. Het thema schakelt dan het hele menu naar alleen-klikken, zodat een submenu nooit sluit terwijl de aanwijzer ernaartoe reist. Vlak de structuur af tot twee niveaus als je overal hoveren wilt. Touchscreens en vensters smaller dan 992 pixels gebruiken altijd klikken.</p>'
        -
          '@type': Question
          name: 'Hoe krijg ik de volle-breedte megamenu-lay-out?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Geef de dropdown 15 of meer directe kinderen. Vanaf drie kolommen beslaat hij de volle headerbreedte. Met 8 tot 14 kinderen krijg je twee kolommen onder de bovenliggende link; minder blijft één kolom.</p>'
        -
          '@type': Question
          name: 'Kan een bovenliggende link de dropdown openen zonder te navigeren?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Ja. Vul &lt;nolink&gt; of &lt;button&gt; in als link als je het menu-item bewerkt; beide zitten in Drupal-core. De bovenliggende link schakelt dan zijn dropdown om en heeft geen eigen pagina.</p>'
    -
      '@type': TechArticle
      headline: 'Responsieve multilevel-megamenu’s met DXPR Theme'
      description: '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.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T06:19:50+0000'
      dateModified: '2026-10-24T01:14:23+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-theme-leren/low-code-thema-aanpassing/responsieve-multilevel-megamenus'
      articleSection: 'Thema aanpassen met low-code'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-theme-leren/low-code-thema-aanpassing/responsieve-multilevel-megamenus'
      description: '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.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Theme leren](/nl/hc/documentation/learn-dxpr-theme) /[Thema aanpassen met low-code](/nl/hc/documentation/learn-dxpr-theme/low-code-theme-customization) # Responsieve multilevel-megamenu’s met DXPR Theme.

 DXPR Theme lerenThema aanpassen met low-code

   ## In deze gids

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 &amp; 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](/nl/drupal-agent-skills) (`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.

## Vragen over DXPR Theme-megamenu’s

### Heb ik een megamenu-module nodig bij DXPR Theme?

Nee. Kolommen, drie niveaus, hover- en klikgedrag, toetsenbordondersteuning en het mobiele menu komen uit het thema. Je hebt alleen een genest menu nodig met *Als uitgevouwen weergeven* op de bovenliggende links, of *Alle menulinks uitvouwen* op het menublok.

### Waarom opent mijn dropdown alleen bij klikken?

Omdat ergens in het menu een dropdown een derde niveau heeft. Het thema schakelt dan het hele menu naar alleen-klikken, zodat een submenu nooit sluit terwijl de aanwijzer ernaartoe reist. Vlak de structuur af tot twee niveaus als je overal hoveren wilt. Touchscreens en vensters smaller dan 992 pixels gebruiken altijd klikken.

### Hoe krijg ik de volle-breedte megamenu-lay-out?

Geef de dropdown 15 of meer directe kinderen. Vanaf drie kolommen beslaat hij de volle headerbreedte. Met 8 tot 14 kinderen krijg je twee kolommen onder de bovenliggende link; minder blijft één kolom.

### Kan een bovenliggende link de dropdown openen zonder te navigeren?

Ja. Vul `<nolink>` of `<button>` in als link als je het menu-item bewerkt; beide zitten in Drupal-core. De bovenliggende link schakelt dan zijn dropdown om en heeft geen eigen pagina.