Blocks
Migliori navbar blocks 2026: 9 sezioni verificate
9 navbar da 3 registry con 24 file, 2,7 per blocco: la categoria più pesante per sezione. Cosa si rompe tra stato sticky, drawer mobile e cambio di sessione.
In sintesi
- 9 navbar, 24 file: 2,7 file per blocco, il rapporto più alto tra le categorie di sezioni.
- Il difetto più frequente è il cambio di sessione che sposta i link e fa saltare il layout.
- Cinque delle nove righe arrivano da un solo publisher.
Una navbar è la navigazione globale: deve reggere lo stato sticky, il drawer su telefono e il cambio di stato dell’utente senza spostare niente. Il catalogo ne conta 9 da 3 registry, misurate il 1 novembre 2026, con 24 file in totale, cioè 2,7 per blocco.
Il guasto più comune non è estetico: è il riflusso. Quando l’utente accede, il pulsante “Accedi” diventa un avatar e la barra si allarga o si restringe di quaranta pixel, spostando i link e il contenuto sotto. Lo stesso accade quando compare un banner di annuncio o quando il nome utente è lungo. Su una pagina già letta, quel salto si sente come un tremolio e rovina la sensazione di qualità più di qualsiasi colore sbagliato.
Perché 24 file per nove barre
Sei blocchi su nove sono multi-file, le dipendenze npm dichiarate sono 16 e le registry dependency 17. Una navbar con varianti mobile e desktop separate, un tema scuro e uno stato di scroll finisce facilmente in quattro file: barra, drawer, voce di menu, logo. Non è un difetto, ma cambia il calcolo: non stai copiando un componente, stai adottando una struttura con più punti da aggiornare quando cambi una voce.
Il cambio di stato che sposta i link
Riserva lo spazio prima che il contenuto cambi: un contenitore a larghezza fissa per l’area utente, oppure uno scheletro con le stesse dimensioni del pulsante e dell’avatar. Poi controlla il caso del nome lungo, che è quello che nessuna anteprima mostra: un nome di ventidue caratteri in un menu a destra può spingere il logo fuori dalla griglia. Se la navbar usa il troncamento, verifica che il nome completo resti disponibile in un title o in un menu.
La tabella, ordinata per file
Le prime righe sono le navbar con più parti già scritte, non quelle più adatte. Navbar 03 di Shadcn UI Blocks apre la lista perché porta varianti e stato; la Navbar 01 di Shadcn Space pesa meno e contiene solo la barra. La colonna Registry dice da dove viene il codice: cinque righe da un publisher, tre da un altro, una da un terzo, quindi la varietà di disegno è limitata.
| Blocco | Registry | File | Categoria |
|---|---|---|---|
| Navbar 03 | Shadcn UI Blocks | 5 | navbar |
| Navbar 01 | Shadcn UI Blocks | 4 | navbar |
| Navbar 02 | Shadcn UI Blocks | 4 | navbar |
| Navbar 04 | Shadcn UI Blocks | 4 | navbar |
| Navbar 01 - Minimal Agency Navbar | Shadcn Space | 2 | navbar |
| Navbar 05 | Shadcn UI Blocks | 2 | navbar |
| Gooey navbar | bagUi | 1 | gooey |
| Navbar Exemple 1 | bagUi | 1 | navbar |
Le prove che smascherano una navbar
Apri la preview a 360px e cerca il drawer: deve aprirsi, prendere il focus, chiudersi con Escape e restituire il focus al pulsante. Poi porta lo zoom al 200% e verifica che i link non si sovrappongano e che la barra non diventi più alta del previsto. Infine apri una pagina con un’ancora e controlla che il titolo non finisca sotto la barra sticky: serve uno scroll-margin-top misurato, non un valore scelto a occhio.
- Il drawer mobile blocca lo scroll della pagina e lo ripristina alla chiusura.
- L’area utente ha spazio riservato e non cambia larghezza tra sessione attiva e assente.
- La barra sticky non copre i titoli raggiunti da un link ad ancora.
- Il link attivo è indicato da qualcosa oltre al colore, e con aria-current.
curl "https://ui.eneawork.it/api/blocks/category/navbar?limit=10"Il limite: nove righe, cinque da un publisher
La categoria è troppo piccola per una classifica: cinque navbar arrivano da Shadcn UI Blocks, tre da bagUi, una da Shadcn Space. Il raggruppamento nasce dal titolo, quindi un blocco chiamato “Navbar Exemple 1” entra con il refuso del publisher, e una barra di navigazione chiamata “Header” finisce nell’altra categoria. Per un confronto più ampio conviene guardare insieme navbar, header e menu, sapendo che le tre liste si sovrappongono.
Regola di decisione
Fino a cinque link, senza sottomenu, una navbar a riga singola con un drawer per il mobile è la scelta più solida: meno file, meno stati, meno da aggiornare. Se hai categorie annidate, il problema è di architettura dell’informazione e un mega menu non lo risolve: riduci le voci prima di scegliere il blocco. L’alternativa è scrivere la barra a mano con un nav, un flex e il componente sheet di shadcn per il mobile: venti righe, nessuna dipendenza in più, e il comportamento che hai deciso tu. Il confronto tra shadcn e una libreria completa come Chakra chiarisce quanto stai pagando in struttura.
Le barre stanno su /blocks/category/navbar, l’inventario su /blocks, e Navbar 03 ha la scheda qui. Per il drawer su telefono leggi la navbar mobile in React, per il pannello laterale lo drawer shadcn su mobile, e per il confronto tra shadcn e Chakra shadcn contro Chakra.
Domande frequenti
Quanti navbar blocks ci sono nel catalogo?
9 blocchi da 3 registry, misurati il 1 novembre 2026, per 24 file totali. Cinque righe arrivano da Shadcn UI Blocks.
Perché la navbar salta quando l'utente accede?
Perché il pulsante Accedi diventa un avatar e l'area utente cambia larghezza. Serve spazio riservato con una larghezza fissa o uno scheletro della stessa dimensione.
Quanti file servono per una navbar mobile?
La media della categoria è 2,7 file per blocco, perché barra, drawer e voci di menu sono spesso separati. Un blocco a un file contiene solo la barra desktop.
Come evito che la navbar sticky copra i titoli?
Con scroll-margin-top pari all'altezza reale della barra. Il valore va misurato: cambia quando i link vanno a capo o quando compare un banner.
Meglio navbar block o scrivere la barra a mano?
Fino a cinque link conviene scriverla: un nav, un flex e il componente sheet per il mobile. Il blocco serve quando porta varianti e stati che non vuoi riscrivere.