Un menu di navigazione efficace permette di raggiungere le pagine chiave con il minimo numero di click. Servono etichette chiare, una gerarchia comprensibile, un comportamento responsive e un markup accessibile secondo le indicazioni WAI/W3C. Qui trovi le tipologie di menu, i principi progettuali, un esempio di implementazione in HTML e CSS e i metodi per verificare il risultato.
In breve:
- Limita le voci principali a cinque, usa etichette familiari e chiedi a tre persone esterne al progetto che cosa si aspettano di trovare.
- Per negozi con centinaia di prodotti, usa un megamenu al computer e un pannello laterale sul telefono; per un sito vetrina basta un menu orizzontale.
- Usa un elemento nav semantico, garantisci l’accesso da tastiera e mantieni visibile il focus; ogni area cliccabile dovrebbe misurare almeno 48 pixel.
- Nel menu mobile, comunica apertura e chiusura con aria-expanded e aria-controls, sposta il focus nel pannello e chiudilo con Esc.
- Confronta le etichette raggruppando le voci e verifica la gerarchia chiedendo alle persone di trovare pagine in una struttura testuale senza grafica.
Indice
- Che cos’è un menu di navigazione e che ruolo ha nel sito?
- Quale tipologia di menu scegliere per il tuo sito?
- Come si costruiscono etichette e gerarchia che gli utenti capiscono?
- Come rendere il menu accessibile e facile da usare?
- Come si comporta un menu su mobile?
- Come si realizza un menu con HTML e CSS e senza JavaScript?
- Come verificare se il menu funziona davvero?
- Il menu migliore è quello che parte piccolo e si misura
- Come ti aiutiamo a progettare menu e siti che si orientano da soli
- Domande frequenti
- Fonti
Che cos’è un menu di navigazione e che ruolo ha nel sito?
Un menu di navigazione è un insieme organizzato di link che guida le persone tra le pagine del sito. Non è però un elemento unico: le best practice UX distinguono quattro ruoli, e capire quale ti serve è il primo passo per scegliere il pattern giusto.
- Navigazione globale: il menu principale, uguale su tutte le pagine, con solo le sezioni più importanti.
- Navigazione locale: sottomenu o categorie specifiche di una sezione, spesso a discesa.
- Navigazione supplementare: link contestuali e breadcrumb, cioè il percorso che mostra dove ti trovi.
- Navigazione di utilità: link tecnici come account, contatti o carrello.
Il menu globale sta di norma nell’header, mentre sidebar e footer ospitano voci locali o secondarie. Un menu fisso, che resta visibile durante lo scroll, è comodo sulle pagine lunghe, purché non copra il contenuto sugli schermi piccoli. Per un blog aziendale, ad esempio, bastano poche voci globali e un link «Contatti» tra quelle di utilità.
Quale tipologia di menu scegliere per il tuo sito?
La scelta dipende dalla quantità di contenuti e dal dispositivo. Non esiste un layout migliore in assoluto, ma ognuno ha un caso d’uso in cui rende al massimo.
- Orizzontale: il classico menu nell’header, ideale per blog e siti vetrina con poche sezioni. Si legge in un colpo d’occhio, ma si riempie in fretta.
- Verticale: sta in una sidebar e regge bene molte voci in elenco. Occupa però spazio laterale e sul mobile va ripensato.
- Hamburger: l’icona a tre linee che nasconde le voci. Libera spazio sugli schermi stretti, però nasconde le scelte e quindi riduce la scoperta delle sezioni.
- Megamenu: un pannello ampio con più colonne di link, adatto a un e-commerce con molte categorie. Richiede cura nell’ordine e nel contrasto, altrimenti confonde.
- Sidenav: un pannello laterale che scorre sopra la pagina, tipico delle app e del mobile.
- Breadcrumb: non sostituisce il menu, ma mostra il percorso e permette di tornare indietro di un livello.
In pratica, un negozio online con centinaia di prodotti userà un megamenu su desktop e un sidenav su telefono, mentre un portfolio professionale se la cava con un orizzontale semplice. Il criterio resta uno: più contenuti hai, più serve una gerarchia visibile e meno conviene nasconderla.
Come si costruiscono etichette e gerarchia che gli utenti capiscono?
La gerarchia delle voci deve rispecchiare i percorsi mentali degli utenti, non l’organigramma aziendale. Il W3C lo dice chiaramente: se l’utente deve pensare troppo per trovare una sezione, la navigazione ha fallito. Per costruirla ti suggeriamo questi passaggi:
- Elenca i compiti che le persone vogliono svolgere sul sito, non le tue divisioni interne.
- Scrivi etichette con le parole che usa il tuo pubblico: «Prezzi» batte «Soluzioni commerciali».
- Limita le voci principali: molti strumenti di creazione siti, come Tilda, consigliano di non superare le cinque in molti casi.
- Usa i sottolivelli con parsimonia e dai priorità ai link di azione e servizio.
- Sposta i link secondari nel footer o in un menu di utilità, e aggiungi la ricerca quando la struttura è profonda.
Le etichette dipendono anche da ciò che le persone cercano: il nostro articolo sul search intent mostra come leggere queste richieste.
Un consiglio: prima di scegliere un’etichetta, chiedila a tre persone fuori dal progetto e annota che cosa si aspettano di trovare dietro quel nome.
Come rendere il menu accessibile e facile da usare?
L’accessibilità si decide in buona parte nel markup. Le linee guida del tutorial WAI sui menu chiedono di marcare i menu in modo che rifletta la loro struttura, di garantire il funzionamento con la tastiera e di evitare ruoli ARIA complessi quando non servono: per la maggior parte dei siti basta un elemento <nav> con una lista di link.
- Tap target: le aree cliccabili dovrebbero misurare almeno 48px, e va evitato
maximum-scale=1ouser-scalable=nonel meta viewport, perché impedisce lo zoom a chi ha disabilità visive. - Landmark e titoli:
<header>,<nav>e<main>danno punti di ancoraggio agli screen reader, e i livelli di intestazione non vanno saltati per ragioni di stile. - Tastiera: ogni voce, anche nei sottomenu, deve essere raggiungibile e attivabile senza mouse, con il focus sempre visibile.
- Stato corrente: evidenzia la pagina in cui ti trovi con uno stile riconoscibile.
- Sottomenu: mostra un simbolo, come una freccia, perché molte persone non intuiscono un contenuto nascosto dietro l’hover, come ricorda il pattern sulla gerarchia del sito.
Per i tap target, Web. Sotto quella soglia, su un telefono, le voci vicine si toccano per errore.
Per un quadro normativo aggiornato trovi un approfondimento sull’accessibilità del sito web.
Come si comporta un menu su mobile?
Sugli schermi stretti nascondere la navigazione può essere necessario, ma va fatto in modo accessibile. web.dev suggerisce un pulsante «Menu» o un’icona hamburger che comunichi lo stato al lettore di schermo con aria-expanded e aria-controls. Con poche voci, un menu sempre visibile resta preferibile: nascondere ciò che serve per orientarsi ha un costo.
- Breakpoint pratici: nell’esempio del componente sidenav di web.dev il passaggio avviene a 540px; scegli la soglia in base a dove le voci smettono di entrare.
- Focus: all’apertura sposta il focus dentro il pannello e alla chiusura riportalo al pulsante che lo ha aperto, evitando focus intrappolati.
- Chiusura: il tasto Esc deve chiudere il pannello, e conviene un fondo cliccabile per uscire.
- Cronologia: apertura e chiusura non dovrebbero aggiungere voci alla cronologia del browser, altrimenti il tasto «indietro» disorienta.
- Movimento: applica
prefers-reduced-motionper ridurre o togliere le animazioni a chi lo ha richiesto.
Un consiglio: testa il menu con una mano sola e il pollice: se arrivi a fatica alle voci in alto, sposta le azioni principali più in basso.
Come si realizza un menu con HTML e CSS e senza JavaScript?
Il punto di partenza è un markup semantico. Un esempio minimo: un elemento <nav aria-label="Principale"> che contiene una lista <ul> di voci <li><a href="...">. L’attributo aria-label distingue questo menu da altri blocchi di navigazione, come il footer. Per il resto della procedura:
- Scrivi la struttura in HTML puro e controlla che funzioni senza alcun foglio di stile.
- Con il CSS rendi gli elementi della lista affiancati per il layout orizzontale, usando flexbox, e definisci stati di hover, focus e pagina corrente.
- Aggiungi una media query che sotto il breakpoint scelto trasformi il menu in verticale o in un pannello.
- Per il menu a scomparsa usa la tecnica checkbox e label, descritta nella Html, che evita la dipendenza da JavaScript.
- Aggiungi JavaScript solo come miglioramento progressivo: il menu deve restare utilizzabile anche con lo script disattivato, come ricorda l’analisi di Userpilot.
Se usi WordPress, i menu si gestiscono da Aspetto, poi Menu, come spiega il supporto ufficiale, ma aspetto e comportamento dipendono dal tema.
Come verificare se il menu funziona davvero?
Un menu si valida con dati, non con impressioni. Prima del lancio ci sono due metodi semplici, e dopo conviene misurare l’uso reale.
- Card sorting: chiedi a un gruppo di persone di raggruppare e nominare le voci; ti mostra quali etichette e quali raggruppamenti hanno senso per loro.
- Tree testing: proponi una struttura testuale senza grafica e chiedi di trovare una pagina; rivela se la gerarchia regge.
- Click-through sulle voci: le voci che nessuno clicca sono candidate a spostarsi nel footer o a sparire.
- Tempo per trovare la pagina: misuralo nei test utenti sulle pagine che contano di più, come contatti o prezzi.
- Bounce rate: controllalo sulle pagine importanti per capire se chi arriva si perde subito.
Dopo ogni modifica rileggi i risultati e aggiorna anche sitemap e breadcrumb. Il W3C raccomanda più modi di accesso ai contenuti: non affidarti solo al menu principale, ma integra breadcrumb, sitemap e una ricerca efficace.
Il menu migliore è quello che parte piccolo e si misura
Nella nostra esperienza i menu falliscono quasi sempre per eccesso, non per difetto: ogni reparto vuole la sua voce e il risultato è un elenco che nessuno legge. Meglio partire da poche voci, guardare che cosa fanno davvero le persone e aggiungere solo ciò che i dati giustificano. Il markup semantico non è un dettaglio da sviluppatori: è ciò che fa funzionare il menu per tutti. Con i nostri clienti lavoriamo così, passo dopo passo.
Come ti aiutiamo a progettare menu e siti che si orientano da soli
Quando il menu fa parte di un progetto più ampio, delegare conviene. Con il nostro servizio di creazione siti web, a partire da 349 € una tantum, progettiamo struttura, etichette e navigazione insieme al design, con attenzione a responsive e accessibilità. Se hai già un sito che non convince, il restyling ridisegna la navigazione senza ripartire da zero. Un’agenzia serve soprattutto quando servono requisiti di accessibilità, integrazioni o test con utenti reali. IMAGE:cta_image] Visita la pagina [Creazione siti web e raccontaci il tuo progetto: ti diciamo da dove partire.
Domande frequenti
Come si costruisce un menu di navigazione?
Si parte dalle pagine che le persone cercano di più, poi si scrivono etichette semplici e si organizzano in poche voci principali. Si realizza con un elemento <nav> che contiene una lista di link, stilizzata con il CSS. Infine si verifica con test rapidi su utenti reali.
Dove si trova la barra di navigazione di un sito?
Di solito sta nell’header, in alto, ed è visibile su tutte le pagine. Altri link di navigazione compaiono in sidebar o nel footer. Non va confusa con la barra degli indirizzi del browser, che è un elemento esterno al sito.
Come posso creare un menu a tendina in WordPress?
Dal pannello Aspetto, poi Menu, crea il menu e trascina una voce sotto un’altra per renderla sottovoce. Il supporto di WordPress indica anche l’Editor di blocchi come alternativa. Il comportamento a tendina dipende dal tema scelto.
Quante voci deve avere un menu principale?
Meno sono, meglio si leggono. Alcuni strumenti per creare siti, come Tilda, consigliano di fermarsi a cinque voci principali in molti casi. Le altre vanno nei sottolivelli, nel footer o in un menu di utilità.
Fonti
Raccomandati
- Accessibilità sito web: cosa cambia con l’obbligo 2026
- SEO on page: come ottimizzare le pagine per ottenere risultati nel 2026
