Migliori menu blocks 2026: 9 sezioni verificate

Un menu è un componente di divulgazione: apre, mostra, richiude e restituisce il focus dove era. Nel catalogo ci sono 9 blocchi menu da 2 registry, misurati il 1 novembre 2026, ed è la categoria più piccola del catalogo blocchi, quindi la lista va letta come un campione, non come un mercato.

Le rotture di un menu si vedono tutte da tastiera. Il pannello si apre, il focus resta sul pulsante che l’ha aperto e il primo link non è raggiungibile; Escape non chiude; il menu full screen blocca lo scroll della pagina e non lo ripristina alla chiusura, così il visitatore torna in cima senza capire perché; aria-expanded resta false mentre il menu è visibile e lo screen reader annuncia uno stato che non esiste.

Quattro righe su nove sono lo stesso menu

Cinque blocchi vengono da systaliko e quattro di questi si chiamano Animated Menu, Animated Menu Demo, Animated Menu 2 Demo e Animated Menu Demo full screen: sono la stessa idea con varianti di presentazione, più un wrapper dimostrativo. Il catalogo conta nove perché conta le sezioni, ma le interpretazioni distinte del problema sono tre o quattro. Saperlo cambia la lettura della tabella: non stai scegliendo tra nove design, stai guardando un solo autore da vicino.

Cosa si rompe quando il menu si apre

Un menu che copre la pagina crea un contesto nuovo: il contenuto sotto è inerte e non deve ricevere il focus. Se il blocco non sposta il focus dentro il pannello, il primo Tab porta a un link dietro l’overlay, invisibile ma attivo. Se non blocca lo scroll, il dito su mobile scorre la pagina sotto e il menu resta fermo. Se non gestisce Escape, chi usa la tastiera deve cercare un pulsante di chiusura che magari sta in alto a sinistra, fuori dal percorso naturale.

La tabella, ordinata per file

Qui la colonna File non distingue quasi nulla, perché ogni blocco è un file solo: la colonna utile è il nome. Il suffisso Demo segnala un wrapper che monta il componente e non una sezione da incollare. Le righe di flx hanno nomi descrittivi, “With action menu”, “With dropdown menu”, e sono componenti che contengono un menu, non menu a schermo intero.

Le prove da tastiera

Apri la preview e fai tre cose, nell’ordine. Prima: apri il menu con Invio, poi premi Tab e verifica che il focus entri nel pannello. Seconda: premi Escape e verifica che il pannello si chiuda e che il focus torni sul pulsante che lo ha aperto. Terza: apri il menu, prova a scorrere la pagina e controlla che il contenuto sotto non si muova; poi chiudi e verifica che lo scroll sia tornato disponibile.

• aria-expanded e aria-controls aggiornati sul pulsante che apre.
• Esc chiude, il focus torna al trigger, Tab non esce dal pannello.
• Scroll della pagina bloccato all’apertura e ripristinato alla chiusura.
• Animazione con fallback per prefers-reduced-motion.

curl "https://ui.eneawork.it/api/blocks/category/menu?limit=10"

Il limite: demo e componenti nella stessa lista

Tre righe non sono menu a pannello: “With action menu” è una card con un menu dentro, “Account menu” è un dropdown, “With dropdown menu” è un input con un menu allegato. Entrano perché il titolo contiene la parola menu e il manifest non dichiara categorie. La categoria, quindi, mescola overlay, dropdown e componenti che ospitano un menu: se cerchi un mega menu non lo trovi qui.

Regola di decisione

Se ti serve la navigazione globale del sito, la lista giusta è quella delle navbar: un menu è un pannello locale, non una barra. Se ti serve un dropdown dentro una card o un form, prendi il componente dropdown-menu di shadcn e non un blocco: il blocco porta un disegno e uno stato che dovrai comunque riscrivere. L’alternativa ai menu animati è l’elemento details con summary, oppure il popover nativo: zero dipendenze, apertura e chiusura da tastiera gestite dal browser, e un aspetto meno spettacolare. Il confronto tra component library, UI kit e design system aiuta a capire quale livello stai davvero adottando.

I menu stanno su /blocks/category/menu, l’inventario su /blocks, e Animated Menu di systaliko ha la scheda qui. Per la navigazione da tastiera leggi la guida alla tastiera nei menu, per il confinamento del focus il focus trap nei modal, e per il confronto tra livelli di astrazione component library, UI kit e design system.