La navigazione è lo scheletro del Suo sito web. Se gli utenti non riescono a trovare quello che cercano in 3 clic, se ne vanno. Progettiamo sistemi navigazione — dai mega-menu per siti da 500 pagine ai drawer mobile puliti per portfolio da 5 pagine — che rendono ogni percorso ovvio, ogni clic intenzionale.
TIPI NAVIGAZIONE
Dropdown multi-colonna che mostra tutte le sezioni principali contemporaneamente. Categorizzato con intestazioni, descrizioni e icone opzionali.
Header che rimane fisso, si adatta allo scroll — si riduce, cambia sfondo, si nasconde/mostra in base alla direzione scroll.
Pannello full-screen o slide-in attivato da icona hamburger. Touch-friendly con target tocco grandi.
Navigazione secondaria che mostra il percorso utente: Home > Categoria > Sottocategoria > Pagina Corrente.
Sidebar sinistra persistente con sezioni richiudibili. Il pattern navigazione primario per app e dashboard.
Overlay ricerca attivato da tastiera dove utenti digitano per trovare pagine, azioni o contenuti. Reso popolare da Notion e Linear.
ANIMAZIONI E EFFETTI
Header si nasconde scrollando giù, riappare scrollando su. Più spazio schermo per contenuti, nav disponibile quando necessaria.
Quando usarlo: Pagine ricche contenuti dove spazio schermo è importante.
Animazione altezza fluida con fade-in contenuto e stagger sottile. Chiude con ritardo per prevenire flickering.
Quando usarlo: Siti grandi con navigazione dropdown multi-colonna.
Overlay full-screen scivola dentro. Voci menu si animano stagger dall'alto al basso. Pagina sfondo si scurisce.
Quando usarlo: Ogni navigazione mobile. Crea sensazione rifinita, simile ad app.
Voce nav si evidenzia mentre utente scorre alla sua sezione. Piccolo indicatore scivola alla voce attiva.
Quando usarlo: Siti single-page, documentazione con sidebar, navigazione basata su ancore.
Icona ricerca compatta si espande in campo input completo al clic. Risultati appaiono mentre utente digita.
Quando usarlo: Siti con funzionalità ricerca. Mantiene nav pulita quando ricerca non è attiva.
BEST PRACTICE
ESEMPI PREMIATI
Nav superiore pulito con dropdown organizzati. Colonna sinistra di link, colonna destra di contenuto in evidenza. Transizioni fluide. Mai travolgente nonostante una suite prodotti grande.
La navigazione più testata sul web. Sistema categoria gerarchico con comportamento hover intelligente. Serve miliardi di categorie prodotto.
Cmd+K apre ricerca veloce, navigabile da tastiera. Digitare per trovare pagine, azioni o scorciatoie. Sfuma il confine tra navigazione e ricerca.
IL NOSTRO PROCESSO
Esercizio card sorting. Mappare tutte le pagine, raggruppare in categorie, definire gerarchia. Tree testing con 5-10 utenti.
Progettare desktop e mobile in Figma. Tutti gli stati: default, hover, attivo, espanso, collassato.
HTML5 semantico nav con attributi ARIA. CSS per layout e transizioni. JavaScript per comportamento dropdown.
Test usabilità con utenti reali. Audit accessibilità. Test performance (nessun layout shift).
PATTERN CORRELATI
L'header si posiziona sopra l'hero; la loro relazione è critica.
Scopra di più →L'altro supporto della navigazione sito.
Scopra di più →Siti contenuti necessitano navigazione robusta per discovery.
Scopra di più →Rimozione navigazione su pagine form può raddoppiare conversioni.
Scopra di più →FAQ
Generalmente no. I menu hamburger nascondono la navigazione dietro un clic, riducendo la scopribilità. Su desktop, la navigazione visibile supera i menu nascosti. Su mobile, l'hamburger è standard e aspettato.
Massimo 3 livelli (nav principale, dropdown, sotto-voci). Più di 3 livelli significa che la Sua architettura informazioni necessita ristrutturazione. Gli utenti dovrebbero raggiungere qualsiasi pagina in 3 clic o meno.
Analizzeremo la Sua struttura sito e progetteremo un sistema navigazione che porta gli utenti dove devono andare.