---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
title: 'Mega menu multilivello responsive con DXPR Theme | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T01:51:41+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '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.'
tags:
  - 'Thema aanpassen met low-code'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T01:51:41+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': FAQPage
      mainEntity:
        -
          '@type': Question
          name: 'Serve un modulo mega menu con DXPR Theme?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>No. Colonne, tre livelli, comportamento hover e clic, supporto tastiera e menu mobile vengono dal tema. Serve solo un menu annidato con <em>Mostra come espanso</em> sui padri, o <em>Espandi tutti i link di menu</em> sul blocco menu.</p>'
        -
          '@type': Question
          name: 'Perché il mio menu a discesa si apre solo al clic?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Perché da qualche parte nel menu un menu a discesa ha un terzo livello. Il tema passa allora l’intero menu al solo clic, così un sottomenu non si chiude mai mentre il puntatore lo raggiunge. Appiattisci la struttura a due livelli se vuoi l’hover ovunque. Touch screen e finestre sotto i 992 pixel usano sempre il clic.</p>'
        -
          '@type': Question
          name: 'Come ottengo il layout mega menu a tutta larghezza?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Dai al menu a discesa 15 o più figli diretti. Da tre colonne in poi copre tutta la larghezza dell’header. Con 8-14 figli ottieni due colonne sotto il link padre; con meno resta una colonna singola.</p>'
        -
          '@type': Question
          name: 'Un link padre può aprire il menu senza cambiare pagina?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Sì. Inserisci &lt;nolink&gt; o &lt;button&gt; come link quando modifichi la voce di menu; entrambi sono integrati nel core di Drupal. Il padre commuta allora il suo menu a discesa e non ha una sua pagina.</p>'
    -
      '@type': TechArticle
      headline: 'Mega menu multilivello responsive con DXPR Theme'
      description: '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.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T01:51:41+0000'
      dateModified: '2026-10-24T01:51:41+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/it/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      articleSection: 'Thema aanpassen met low-code'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      description: '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.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Help Center](/it/hc)/[Documentation](/it/hc/documentation) /[Learn DXPR Theme](/hc/documentation/learn-dxpr-theme) /[Thema aanpassen met low-code](/hc/documentation/learn-dxpr-theme/thema-aanpassen-met-low-code) # Mega menu multilivello responsive con DXPR Theme.

 Learn DXPR ThemeThema aanpassen met low-code

   ## In this guide

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

1. Vai a *Struttura › Menu › Navigazione principale* (`/admin/structure/menu/manage/main`).
2. 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.
3. Trascina i figli sotto il padre così rientrano di un livello, e un terzo livello di un altro, poi premi **Salva**.
4. 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 &amp; 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](/it/drupal-agent-skills) 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.

## Domande sui mega menu di DXPR Theme

### Serve un modulo mega menu con DXPR Theme?

No. Colonne, tre livelli, comportamento hover e clic, supporto tastiera e menu mobile vengono dal tema. Serve solo un menu annidato con *Mostra come espanso* sui padri, o *Espandi tutti i link di menu* sul blocco menu.

### Perché il mio menu a discesa si apre solo al clic?

Perché da qualche parte nel menu un menu a discesa ha un terzo livello. Il tema passa allora l’intero menu al solo clic, così un sottomenu non si chiude mai mentre il puntatore lo raggiunge. Appiattisci la struttura a due livelli se vuoi l’hover ovunque. Touch screen e finestre sotto i 992 pixel usano sempre il clic.

### Come ottengo il layout mega menu a tutta larghezza?

Dai al menu a discesa 15 o più figli diretti. Da tre colonne in poi copre tutta la larghezza dell’header. Con 8-14 figli ottieni due colonne sotto il link padre; con meno resta una colonna singola.

### Un link padre può aprire il menu senza cambiare pagina?

Sì. Inserisci `<nolink>` o `<button>` come link quando modifichi la voce di menu; entrambi sono integrati nel core di Drupal. Il padre commuta allora il suo menu a discesa e non ha una sua pagina.