# 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.

> Pagina: https://ui.eneawork.it/blog/navbar-mobile-react
> Markdown: https://ui.eneawork.it/blog/navbar-mobile-react.md

*2026-10-31*

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

## 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.

## 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.

## FAQ

### 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.