Migliori header blocks 2026: 18 sezioni verificate

Un header è la testata della pagina: dice dove sei, cosa puoi fare lì e come tornare indietro. Il catalogo ne indicizza 18 da 4 registry, misurati il 1 novembre 2026, ed è una delle categorie più piccole, quindi la tabella va letta come un inventario, non come una classifica.

Le rotture di un header sono geometriche. Se è sticky e la pagina ha link ad ancora, il titolo della sezione finisce sotto la barra: serve scroll-margin-top pari all’altezza dell’header, e quell’altezza cambia quando il titolo va a capo. Se contiene un breadcrumb lungo, a 360px l’ultimo elemento viene tagliato e il visitatore perde il punto in cui si trova. Se convive con una sidebar, l’header deve allinearsi al suo inset, altrimenti il titolo scivola di 16px rispetto al contenuto.

Testata di pagina o barra di navigazione

Le due categorie si sovrappongono perché i publisher usano la parola header anche per le barre di navigazione. La distinzione utile è nel contenuto: un header porta titolo, breadcrumb, ricerca e azioni della pagina; una navbar porta i link globali e il menu mobile. Se stai cercando il secondo, la lista giusta è quella delle navbar; mescolare le due porta a installare una barra globale dentro una schermata applicativa, dove non serve.

27 file e una sola dipendenza npm

I 18 blocchi sommano 27 file, cioè 1,5 per sezione, e una sola dipendenza npm in tutto il gruppo. Le registry dependency sono 25: quasi tutto il peso è in componenti shadcn già presenti in un progetto tipico, button, separator, breadcrumb, dropdown, quindi il costo non è installare, è adattare la struttura a tre slot: cosa sta a sinistra, cosa al centro, cosa a destra. Un header con più file di solito è un header con varianti di stato già scritte.

• Numero di file: un header a due o tre file contiene le varianti mobile e desktop già separate.
• Registry dependency: breadcrumb e dropdown sono componenti che devi avere, non pacchetti da aggiungere.
• Nome del blocco: “Header Demo” è un wrapper dimostrativo e non una sezione da incollare.
• Publisher: metà delle righe viene da sv-blocks, quindi le varianti sono parenti strette.

La tabella, ordinata per file

La colonna Registry pesa più del solito: 9 righe su 18 vengono da sv-blocks e sono variazioni sullo stesso disegno, quindi la tabella misura la profondità di un fornitore più della varietà del catalogo. Le tre righe di efferd sono invece lo stesso header in tre configurazioni, utile per capire quali slot cambiano senza toccare il markup.

Le tre prove da fare

Prima prova: apri la preview a 360px e guarda il breadcrumb; se l’ultimo elemento è tagliato, l’header non regge i titoli lunghi. Seconda: porta la pagina a 200% di zoom e verifica che le azioni non si sovrappongano al titolo. Terza: apri un dialog dalla pagina e controlla che l’header non resti sopra l’overlay, un classico errore di z-index quando la barra ha position sticky e un valore alto.

• scroll-margin-top uguale all’altezza misurata dell’header, non a un numero indovinato.
• Il breadcrumb ha un elemento finale non cliccabile e un titolo accessibile.
• Le azioni restano raggiungibili da tastiera e mostrano il focus ring.
• L’header non copre il primo titolo quando la pagina viene aperta da un’ancora.

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

Il limite: due righe sono demo

“Header Demo” di systaliko è il wrapper che monta il componente, non la sezione; “Sticky header” di flx è un dialog che simulava un header appiccicoso. Entrambe restano nella lista perché il titolo contiene la parola header e il manifest non dichiara categorie: la deduzione è trasparente, ma su 18 righe due sono rumore, cioè l’11% della categoria.

Regola di decisione

Se la pagina vive dentro una shell con sidebar, prendi un header a tre slot e allinealo all’inset della sidebar: il titolo deve partire sulla stessa verticale del contenuto. Se la pagina è di marketing, meglio un header con breadcrumb e una sola azione. L’alternativa è non avere un header: nelle pagine di documentazione il titolo può stare nel contenuto e la barra global basta, con un guadagno netto di spazio verticale su mobile e un problema in meno di ancore coperte.

Le testate stanno su /blocks/category/header, l’inventario su /blocks, e header-1 di efferd ha la scheda qui. Per la struttura della pagina leggi come strutturare un layout, per il percorso di navigazione breadcrumb accessibile, e per il confronto tra blocchi copiati e componenti headless copy-paste contro headless.