I visitatori non dovrebbero dover indovinare dove puntare il cursore per trovare la sezione giusta. Se un sito ha più di sei pagine chiave, un menu a tendina standard diventa un test di destrezza: una mossa sbagliata e l'utente torna all'inizio. Un mega menu risolve questo problema in modo radicale.

Un mega menu è un menu espandibile ampio dove tutte le categorie sono visibili contemporaneamente, senza sottomenu a cascata e caccia al link. Grandi marketplace, portali di notizie, progetti editoriali usano questo approccio non per estetica, ma perché funziona: il visitatore raggiunge la sezione di terzo livello desiderata con un solo clic.

Il problema è che WordPress non supporta i mega menu in modo nativo. Anche se un tema offre un'opzione integrata, è quasi sempre limitata a un paio di colonne senza una vera personalizzazione. Per un mega menu completo, con un editor visuale, versione responsive e impostazioni precise, serve lo strumento giusto, ed è qui che entrano in scena Elementor e The Plus Addons.

💡 Panoramica rapida:

• Attiva il widget TP Navigation Menu in The Plus Addons e crea un template per il mega menu tramite l'editor visuale di Elementor.
• Configura il menu standard di WordPress (Aspetto, Menu), aggiungendo il template creato come voce che espande il mega menu.
• Crea un template per l'intestazione tramite Elementor Theme Builder e inserisci al suo interno il widget Navigation Menu di The Plus Addons.
• Configura il comportamento responsive: menu o template separato per i visitatori da mobile, breakpoint, aspetto.

Quando il tuo sito ha bisogno di un mega menu

Un mega menu non è una soluzione universale per ogni progetto. Ma se un sito ha più di sei sezioni con sottocategorie, la navigazione standard smette di funzionare. I ricercatori di user experience del Nielsen Norman Group lo dicono con precisione: «I mega menu funzionano bene per la navigazione del sito... È una scelta progettuale eccellente quando devi gestire un gran numero di opzioni o mostrare pagine di livello inferiore a colpo d'occhio.»

Negli store online, il mega menu è di fatto uno standard. Categorie di prodotto, sottocategorie, filtri: tutto questo va mostrato subito al visitatore, non nascosto dietro una serie di hover:

Questo rappresenta un enorme passo avanti rispetto al «vecchio» approccio, i menu compositi con sottomenu a cascata, dove il visitatore doveva avere una precisione da cecchino nei movimenti e un solo errore lo riportava all'inizio:

Ecco come i grandi store online usano i mega menu:

Etsy adotta un approccio simile: le categorie handmade, vintage e forniture sono espanse in un unico pannello, l'acquirente vede l'intera gamma in una sola occhiata:

Ma i mega menu non sono solo per l'e-commerce. Siti di notizie, riviste, editori di contenuti, portali aziendali: ovunque serva rendere accessibile una massa di informazioni di medio e basso livello, questa tecnica funziona:

Yelp raggruppa ristoranti, servizi per la casa e servizi auto in blocchi intuitivi, facendo risparmiare tempo ai visitatori nella ricerca:

Website builder Tilda utilizza un mega menu per mostrare le tipologie di template ed esempi di portfolio, aiutando i nuovi utenti a orientarsi:

Il sito di viaggi Duvine presenta le destinazioni in una griglia chiara, eliminando la necessità di scorrere un catalogo:

L'agenzia Quasar colloca portfolio, servizi e contatti in un mega menu, trasformando la navigazione in una vetrina delle proprie competenze:

Cosa ti serve per creare un mega menu

Elementor mette a disposizione un editor visuale con drag and drop e tutte le funzionalità di design per costruire un mega menu. Ma per aggiungere la funzionalità stessa, espansione al passaggio del mouse, posizionamento, adattamento responsive, hai bisogno di un plugin di terze parti.

Nello specifico, The Plus Addons for Elementor. Si tratta di un'estensione potente con oltre 120 widget, e tra questi c'è il widget TP Navigation Menu, che copre tutti gli scenari: mega menu orizzontali, verticali e a sidebar, toggle, opzioni responsive.

Cosa offre The Plus Addons:

• Integrazione completa con Elementor. Il widget è scritto specificamente per Elementor ed è compatibile con tutti gli altri widget e le funzionalità del builder, senza bisogno di imparare una nuova interfaccia.
• Responsività al pixel. Puoi impostare menu diversi o persino template di mega menu diversi per dispositivi desktop e mobile.
• Supporto cross-browser. Tutti i visitatori ricevono un'esperienza di pari qualità, indipendentemente dal browser.
• Personalizzazione flessibile. Impostazioni per dimensioni, allineamento, colori delle etichette, icone, tutto attraverso il familiare pannello di Elementor.

Per una funzionalità completa dell'header, ti servirà anche Elementor Pro: il suo Theme Builder ti permette di creare un template personalizzato per l'header e di inserirvi il widget Navigation Menu.

Come creare un mega menu in Elementor: guida passo passo

L'intero processo si articola in cinque passaggi. Assicurati di avere installati e attivi tre plugin:

• Elementor (gratuito)
• Elementor Pro, per il Theme Builder e gli header personalizzati
• The Plus Addons for Elementor, la versione gratuita è disponibile su WordPress.org, ma per il widget Navigation Menu serve una licenza Pro dal sito ufficiale

Passaggio 1. Attivare il widget TP Navigation Menu

Nel pannello di amministrazione di WordPress, vai su ThePlus Settings → Plus Widgets e attiva il widget TP Navigation Menu:

Dopo l'attivazione, nella barra laterale del pannello di amministrazione compare un nuovo custom post type Plus Mega Menu: è l'archivio per tutti i tuoi template di mega menu.

Passaggio 2. Creare un template di mega menu in Elementor

Vai su Plus Mega Menu → Aggiungi nuovo. Assegna al template un nome significativo, ti tornerà utile quando userai mega menu diversi in punti diversi del sito. Clicca su Modifica con Elementor:

Ora sei nell'editor visuale di Elementor. Costruisci il layout del mega menu come una pagina normale: una sezione principale che copre l'intera larghezza del mega menu, al suo interno colonne per ogni blocco semantico e, nelle colonne, qualsiasi widget di Elementor: titoli, elenchi, immagini, pulsanti. Il Navigator di Elementor (pannello struttura in basso a sinistra) aiuta a visualizzare la gerarchia di sezioni e colonne.

Quando il design è pronto, salva e pubblica il template.

Passaggio 3. Configurare il menu di navigazione di WordPress

Ora devi collegare il template creato al menu effettivo del sito. Vai su Aspetto → Menu. Se non esiste ancora un menu, creane uno.

Per prima cosa, aggiungi le voci di primo livello per le sezioni principali tramite Link personalizzati: sono voci che non espandono un mega menu, ma portano semplicemente alle pagine.

Poi espandi la sezione Plus Mega Menu nella barra laterale di aggiunta elementi e seleziona il template creato nel passaggio precedente: verrà aggiunto come voce di menu e, al passaggio del mouse, espanderà il mega menu.

Se la sezione Plus Mega Menu non viene visualizzata, WordPress la sta nascondendo. Clicca su Opzioni schermata in alto a destra e spunta la casella Plus Mega Menu:

Per la voce aggiunta, configura dimensione e allineamento. Sono disponibili tre opzioni di dimensione:

• Predefinita, larghezza massima in pixel.
• Contenitore, in base alla larghezza del contenitore del sito.
• Larghezza intera, il mega menu si estende a tutta la larghezza dello schermo.

Qui configuri anche l'etichetta dell'elemento, i colori dell'etichetta e le icone:

Passaggio 4. Creare un template di header nel Theme Builder

Ora il mega menu deve essere inserito nell'header del sito. Per questo si usa il Theme Builder, parte di Elementor Pro.

Vai su Template → Theme Builder e crea un nuovo template di header (oppure modificalo se ne esiste già uno). Puoi scegliere un template di header già pronto o costruirne uno da zero. Tramite le condizioni di visualizzazione di Elementor Pro, configura dove mostrare questo header: sull'intero sito o solo su pagine specifiche.

Nell'editor dell'header, aggiungi il widget TP Navigation Menu di The Plus Addons:

Nelle impostazioni del widget, seleziona la direzione del menu: orizzontale, verticale o sidebar verticale:

Poi nell'opzione Select Menu, specifica il menu che hai configurato al punto 3:

Ulteriori parametri di stile sono disponibili nella scheda Style: colori, font, spaziatura, effetti hover.

Step 5. Configura il comportamento responsive

Ultimo passaggio, la versione mobile. Espandi le impostazioni Mobile Menu nella scheda Content del widget Navigation Menu. Attiva l'opzione Responsive Mobile Menu e imposta il breakpoint, ovvero la larghezza dello schermo alla quale si attiva il layout mobile:

Nel menu a tendina Menu Content, seleziona cosa mostrare ai visitatori mobile: lo stesso menu del desktop, un menu separato senza mega menu (creato in Aspetto → Menu) oppure un template completamente diverso costruito con Elementor.

Fatto. Hai appena creato un mega menu responsive su WordPress usando Elementor e The Plus Addons.

Video: il processo di configurazione in prima persona

La teoria va bene, ma una dimostrazione dal vivo fa risparmiare mezz'ora di tentativi ed errori. Questo video mostra il processo completo di configurazione del widget Navigation Menu di The Plus Addons per Elementor, dall'attivazione fino a un mega menu funzionante sul sito:

⁉️🤔 Domande frequenti

Serve Elementor Pro per creare un mega menu?

Sì, Elementor Pro è necessario. La versione gratuita di Elementor non include il Theme Builder, lo strumento per creare template personalizzati per l'header, senza il quale non puoi inserire un widget mega menu nell'intestazione del sito. I temi WordPress standard non offrono un'area per inserire un widget Elementor nella navigazione. La licenza di Elementor Pro parte da $59 all'anno per un sito.

The Plus Addons è gratuito o a pagamento?

The Plus Addons ha una versione gratuita su WordPress.org con un set base di widget. Tuttavia, il widget TP Navigation Menu, responsabile dei mega menu, è disponibile solo nella versione Pro. La licenza Pro si acquista sul sito ufficiale theplusaddons.com e include oltre 120 widget, più di 1000 template e supporto prioritario. Un percorso alternativo è il mega menu integrato di Elementor Pro (comparso nella versione 3.12+), ma è inferiore in flessibilità: niente sidebar e mega menu verticale, meno impostazioni di responsività.

Si possono creare più mega menu diversi su uno stesso sito?

Sì. The Plus Addons ti permette di creare un numero qualsiasi di template di mega menu tramite Plus Mega Menu → Aggiungi nuovo. Ogni template è costruito in Elementor in modo indipendente. Nei menu di WordPress (Aspetto → Menu) aggiungi i template necessari come voci separate, ad esempio il mega menu "Catalogo" per la voce "Prodotti" e il mega menu "Servizi" per la voce "Servizi". Attraverso le condizioni di visualizzazione di Elementor Pro, puoi mostrare header diversi su pagine diverse del sito: un header per il negozio, un altro per il blog.

Cosa fare se il mega menu non viene visualizzato su mobile?

Verifica tre impostazioni nel widget Navigation Menu. Primo, se l'opzione Responsive Mobile Menu è attiva (scheda Content → Mobile Menu). Secondo, se il breakpoint è impostato correttamente (larghezza in pixel alla quale si attiva il layout mobile). Terzo, se è stata selezionata una fonte specifica in Menu Content: se è impostato su "Same as desktop", ma il menu desktop è troppo largo per lo schermo mobile, non entrerà nello spazio. Soluzione: crea un menu semplificato separato per il mobile in Aspetto → Menu e selezionalo nel menu a tendina Menu Content.

The Plus Addons entra in conflitto con altri plugin per Elementor?

Molto raramente. The Plus Addons è scritto specificamente per Elementor ed è testato per la compatibilità con ogni aggiornamento maggiore. A maggio 2026, il plugin ha ricevuto la compatibilità con WordPress 7.0 due giorni dopo il rilascio, e questo dimostra il livello di supporto. Se dovesse comunque verificarsi un conflitto, inizia disattivando uno alla volta gli altri addon di Elementor per trovare il colpevole. Il più delle volte, i problemi non sono creati dai plugin principali, ma da estensioni poco conosciute con CSS non testato.

Crea un mega menu che funzioni per te

Un mega menu non è decorazione, ma uno strumento di navigazione che trasforma il caos di trenta pagine in una struttura comprensibile. Il visitatore vede tutto subito, raggiunge la sezione desiderata con un clic e non abbandona il sito per frustrazione.

Con Elementor e The Plus Addons, ottieni il controllo visivo su ogni pixel del mega menu senza una sola riga di codice. I cinque passaggi descritti sopra, attivazione, template, menu, header, responsive, coprono l'intero ciclo dall'idea alla soluzione funzionante in un'ora, un'ora e mezza.

Scegli lo strumento giusto per il compito. Se il sito è semplice e il budget è limitato, il mega menu integrato di Elementor Pro è sufficiente. Se il progetto è complesso, con diversi tipi di mega menu, navigazione mobile e desktop differenti, installa The Plus Addons e non voltarti indietro.