# Best navbar blocks 2026: 9 verified sections

9 navbars from 3 registries with 24 files, 2.7 per block: the heaviest category per section. What breaks between sticky state, mobile drawer and session changes.

> Page: https://ui.eneawork.it/blog/migliori-navbar-blocks-2026
> Markdown: https://ui.eneawork.it/blog/migliori-navbar-blocks-2026.md

*2026-11-01*

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.

Conteggio del 1 novembre 2026 sui manifest di data/blocks.json: categoria dichiarata o dedotta dal titolo, file elencati, dipendenze npm e registry dependency. Nove blocchi, ventiquattro file, tre publisher. Il comando riproducibile è qui sotto.

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

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

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

Le nove righe dichiarano “see source” e il catalogo ripete la parola del publisher. Con tre soli repository la verifica è rapida; il rischio vero è il logo di esempio, che resta di chi lo ha disegnato e non segue la licenza del codice.

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

## FAQ

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