Mega menu multilivello responsive con DXPR Theme.
DXPR Theme crea il suo mega menu dal sistema di menu di Drupal. Crei la struttura sotto Struttura › Menu, il tema la trasforma in menu a discesa che si dividono in colonne quando crescono, si annidano su tre livelli, si aprono al passaggio del mouse o al clic e si ripiegano in un menu hamburger sui telefoni. Nessun modulo mega menu, nessuna configurazione extra, e gli stessi link servono desktop e mobile.
Questa guida copre DXPR Theme 8.2.1 o successivi su Drupal 10.3 e Drupal 11. Gli screenshot vengono da un sito Drupal 11.4 con DXPR Theme 8.2.2 e un menu di esempio a tre livelli, presi a ottobre 2026.
Come si comporta il menu
- Menu a discesa dall’indentazione. Ogni link di menu con figli diventa un menu a discesa. Un padre che ha una sua pagina ottiene un controllo sdoppiato: il link naviga, la freccia accanto apre il menu a discesa. Un padre senza pagina apre il menu a discesa con un clic.
- Colonne dal numero di link. Un menu a discesa con 8 o più figli diretti si divide in 2 colonne, con 15 o più in 3, con 21 o più in 4 e con 28 o più in 5. Da 3 colonne in poi, il menu a discesa si allarga a tutta la larghezza dell’header: è il layout mega menu.
- Tre livelli. Un link dentro un menu a discesa può avere figli propri, che si espandono dentro il menu indentati sotto il padre: così una struttura Servizi › Ricerca › Laboratori funziona senza appiattimenti.
- Passaggio del mouse o clic. Su un desktop con mouse, i menu a discesa si aprono al passaggio e sempre al clic. Quando un menu a discesa ha un terzo livello, ogni menu passa al solo clic, così un sottomenu non si chiude mai mentre il puntatore lo raggiunge. Touch screen e finestre sotto i 992 pixel usano sempre il clic.
- Tastiera e screen reader. Frecce, Invio, Spazio, Esc e Tab si muovono nel menu, e gli interruttori espongono il loro stato con
aria-expanded, seguendo il pattern di navigazione WAI disclosure. - Le lingue da destra a sinistra ottengono menu a discesa e sottomenu specchiati.
- Telefoni e tablet. Sotto il breakpoint mobile, 1200 pixel per impostazione predefinita, l’header mostra un’icona hamburger che apre il menu sopra la pagina, e la freccia accanto a ogni padre ne espande i figli sul posto, al secondo livello come al primo.
1. Crea la struttura
- Vai a Struttura › Menu › Navigazione principale (
/admin/structure/menu/manage/main). - Aggiungi i link che servono con Aggiungi link. Per un padre senza una sua pagina, inserisci
<button>(un pulsante nativo da tastiera) o<nolink>come link; entrambi aprono il menu a discesa. - Trascina i figli sotto il padre così rientrano di un livello, e un terzo livello di un altro, poi premi Salva.
- Modifica ogni link padre, spunta Mostra come espanso e premi Salva. Per espandere ogni padre in una volta sola, spunta invece Espandi tutti i link di menu nelle impostazioni del blocco del menu principale.
È tutta la configurazione. Tre livelli è il massimo mostrato dai menu a discesa; i link più profondi appartengono alla pagina, non al menu.
La pagina di amministrazione del menu: figli indentati sotto il padre, un terzo livello sotto il secondo.
Un link padre senza Mostra come espanso è mostrato senza i suoi figli, tranne che sulla sua pagina.
2. Controlla il menu desktop
Apri il sito e passa sopra la freccia accanto a un link padre, o facci clic; un padre senza pagina si apre anche al clic. Quando il menu ha un terzo livello, i menu a discesa si aprono solo al clic. Un elenco corto si apre come menu a una colonna; uno lungo si divide in colonne e, da tre colonne in poi, a tutta la larghezza dell’header. L’ordine segue il peso dei link nella pagina di amministrazione del menu, colonna per colonna.
Il menu Services su desktop, con il terzo livello espanso dentro.
3. Controlla il menu mobile
Restringi il browser sotto il breakpoint mobile o apri il sito su un telefono. L’icona hamburger apre il menu sopra la pagina. Tocca la freccia accanto a un padre per espanderne i figli sul posto, e la freccia accanto a un link di secondo livello per espandere il terzo. Nulla da configurare: è lo stesso menu.
Il menu mobile con Services espanso; la freccia accanto a Research apre il terzo livello.
4. Definisci lo stile di header e menu
Tutto l’aspetto vive nella scheda Header & Main Menu delle impostazioni del tema (Aspetto, poi Impostazioni accanto a DXPR Theme o al tuo sottotema). La pagina delle impostazioni mostra un’anteprima live mentre le cambi.
- Layout: sette layout di header, da Normale (logo a sinistra, menu a destra) a varianti centrate impilate e in linea fino a Logo a destra, menu a sinistra.
- Stile header: Normale, o Overlay per mettere l’header sopra il contenuto della pagina con sfondo trasparente, più opacità, altezza e altezza del logo. Posizione fissa tiene l’header visibile durante lo scorrimento; con essa attiva, Header fisso passa a un’altezza ridotta con una sua opacità dopo un offset di scorrimento.
- Link del menu principale: Larghezza menu a discesa (automatica o fissa da 100 a 500 pixel), Stile font (normale, maiuscolo, grassetto o testo lead), Spaziatura link e uno Stile hover tra opacità, sfondo colorato, testo colorato o bordo (sopra o sotto, che scorre da sinistra, da destra, dal centro o sfuma dall’alto).
- Header mobile e Opzioni menu mobile: il breakpoint mobile (impostalo al massimo, 4100, per usare sempre l’header mobile), altezza e posizione dell’header mobile, l’icona hamburger (a tre o due linee), la sua animazione e l’allineamento del menu.
- Colori header personalizzati: sedici scelte di colore, sfondo e testo per navbar, blocchi header, menu, menu a discesa e menu mobile, più sfondo e testo hover per gli ultimi tre, ognuno dalla palette del tema o con valore personalizzato.
Ogni modifica è un’impostazione, non CSS, quindi sopravvive agli aggiornamenti del tema. Un sottotema ha le sue impostazioni: fai queste modifiche nella pagina delle impostazioni del sottotema.
Da The Better Mega Menu o un altro modulo menu
Disinstalla il modulo e metti il blocco Navigazione principale del core nella regione Navigazione (comprimibile) del tema se non c’è già; quella regione è quella su cui il menu hamburger si ripiega sugli schermi piccoli. Tutto ciò che il modulo faceva con la configurazione, DXPR Theme lo fa dalla struttura del menu: colonne, livelli, hover e menu mobile. Ciò che non viene trasferito è il contenuto dentro il menu a discesa, come immagini o blocchi di testo; mettilo nelle landing page a cui puntano i link.
Lascia che il tuo agente AI crei il menu
Un menu è un elenco di link con gerarchia, il tipo di attività strutturata che un agente di programmazione fa bene. Con la skill Drush Webmaster installata (drush wm:setup-ai), il tuo agente crea e ordina i link di menu da un brief, per esempio "un menu Servizi con Ricerca, Didattica e Strutture, e tre laboratori sotto Ricerca". Con la skill di DXPR Theme (drush dxt:setup-ai) imposta anche layout dell’header, comportamento fisso e colori del menu secondo il brand. Tu revisioni il risultato sul sito.