React
Navbar mobile-ready: il componente React che non si rompe
Il problema della navbar mobile non è il menu: è focus, scroll e tap target. Tre pattern, i controlli a 390px e il codice per una navbar che resta usabile.
In sintesi
- Scegli un pattern, non una navbar “responsive” generica.
- Focus, Escape e scroll lock contano più dell’animazione.
- A 390px il tap target minimo è 44px e il menu deve essere raggiungibile col pollice.
Una navbar mobile si rompe in modi prevedibili: il menu resta aperto sotto il contenuto, il focus torna in cima alla pagina, il body scrolla dietro il drawer, il tap target è 24px. Nessuno di questi problemi si vede in uno screenshot desktop.
Prima di scegliere un componente, decidi il pattern. Poi controlla il comportamento da tastiera e a 390px.
Tre pattern, tre contesti
| Pattern | Quando usarlo | Cosa controllare |
|---|---|---|
| Hamburger + drawer | Siti con molte voci | Focus trap, Escape, scroll lock |
| Bottom navigation | App con 4–5 azioni principali | Tap target, safe-area iOS |
| Menu full-screen | Marketing o portfolio | Ritorno al punto di apertura, chiusura chiara |
Il problema vero è il focus
Quando apri un menu, il focus deve entrare nel menu. Quando lo chiudi, deve tornare al pulsante che lo ha aperto. Se il menu è un drawer, la pagina dietro deve essere inerte; se è un full-screen, deve avere un’uscita visibile e una da tastiera.
- Escape chiude il menu.
- Il click fuori chiude solo se non perde dati.
- Il focus non torna in cima alla pagina.
- Il body non scrolla dietro il menu.
- Il pulsante ha un nome accessibile, non solo un’icona.
Scroll lock e safe area
Su iOS, `overflow: hidden` sul body non basta sempre. Serve gestire la posizione di scroll e la `safe-area-inset-bottom` se la navbar è in basso. Se il menu contiene un form, non bloccare la tastiera virtuale: il campo deve restare visibile.
Il test a 390px
Apri la pagina a 390×844. Con il pollice, raggiungi ogni voce senza coprire il contenuto. Apri il menu, premi Tab, premi Escape, riapri. Se il focus è ancora dove lo hai lasciato e il body non si è mosso, il pattern regge.
Per i componenti pronti, apri la categoria Navigation e guarda la preview mobile. Per i dettagli, la guida Mobile navigation patterns in React copre drawer, bottom nav e focus.
Domande frequenti
Meglio hamburger o bottom navigation?
Bottom navigation per 4–5 azioni principali di un’app; hamburger o drawer per un sito con molte voci. Non usare entrambi per le stesse destinazioni.
Come faccio a bloccare lo scroll dietro il menu?
Imposta `overflow: hidden` sul body e, dove supportato, `inert` sulla pagina; salva e ripristina la posizione di scroll alla chiusura.
Dove deve tornare il focus alla chiusura?
Al pulsante che ha aperto il menu. Se il pulsante non esiste più, al primo elemento interattivo della navbar.
Qual è il tap target minimo?
44×44 CSS px è la soglia pratica. L’icona può essere 16–24px, l’area cliccabile no.
La navbar deve essere sticky?
Solo se il contenuto è lungo e la navigazione serve davvero. Una navbar sticky occupa spazio e può causare CLS se cambia altezza allo scroll.