Migliori footer blocks 2026: 45 sezioni verificate

Un footer che regge la produzione chiude tre cose: porta il visitatore dove la navigazione non è arrivata, mostra i riferimenti legali e non sposta il layout quando cambia la lingua. Il catalogo EneUI ne indicizza 45 da 10 registry, misurati il 1 novembre 2026, e ognuno è una sezione con file propri, non uno screenshot.

Quello che si rompe non è l’aspetto: è la griglia. A 320px le quattro colonne diventano un muro di link, il blocco legale finisce sotto il banner cookie e la riga del copyright si sovrappone alle icone social. Un footer disegnato per il desktop e mai provato su un telefono da 360px sembra corretto in anteprima e illeggibile in produzione, dove il visitatore arriva con un font di sistema diverso e il tema scuro già attivo.

Cosa si rompe davvero

Tre guasti ricorrono. Primo: i link secondari usano un grigio che nasce da un token di opacità e in dark mode scende sotto il rapporto 4.5:1. Secondo: l’elenco delle sedi o delle categorie è generato da JavaScript, quindi il piè di pagina resta vuoto se lo script fallisce o se il crawler non lo esegue. Terzo: l’anno del copyright è scritto a mano e invecchia senza che nessuno se ne accorga. Nessuno dei tre si vede in uno screenshot: si vedono misurando il contrasto, spegnendo JavaScript e aprendo la pagina in due lingue.

Quanti file e quante dipendenze accetti

I 45 blocchi sommano 51 file, cioè 1,1 file per blocco, e solo 5 superano il file singolo. Le dipendenze npm dichiarate sono 17 e le registry dependency 56: il Footer 01 di Shadcn Space ne chiede tre di file e un albero di componenti che conviene leggere prima di installare. Un footer a un file si adatta in mezz’ora; uno a tre file obbliga a decidere dove vive il contenuto e chi lo aggiorna.

• Numero di file: sopra i due il blocco porta dati di esempio da sostituire, non solo markup.
• Registry dependency: sono i componenti shadcn importati; se in progetto ne hai una versione modificata, l’installazione la sovrascrive.
• Dipendenza npm: un pacchetto in più nel footer è un pacchetto in più su ogni pagina del sito.
• Fonte: Shadcn Space, efferd, flx e creative-tim non condividono stile di codice né licenza.

La tabella, ordinata per file

Le prime righe non sono le migliori: sono le più grandi. Un blocco con tre file contiene header, contenuto e dati di esempio; uno con un file è un componente unico. L’ordine serve a stimare il costo di adattamento prima di aprire la preview, non a stilare una classifica di gusto.

Il controllo che salva il footer

Apri la preview a 360px e conta le righe di link: se superano le sei senza un titolo di colonna, il footer non è scansionabile. Poi tabula da tastiera: ogni link deve mostrare un focus visibile e l’ordine deve seguire le colonne. Infine spegni JavaScript: indirizzo, partita IVA, email e link legali devono restare nel documento.

• Contrasto del testo legale almeno 4.5:1; titoli di colonna 3:1 se sopra i 24px.
• Bersagli tattili da 44px minimi su icone social e selettore di lingua.
• Se il sito è bilingue, il numero di righe non deve cambiare tra le due versioni.
• L’anno del copyright va scritto dal server o dal build, mai a mano.

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

Un limite che questa lista ha

Due righe vengono da flx e si chiamano “Terms, sticky footer” e “Footer-only dismiss”: sono dialog, non piè di pagina. Entrano nella categoria perché il titolo contiene la parola footer e il manifest non dichiara categorie; il raggruppamento è dedotto dalle parole del publisher, non inventato, ma resta una deduzione. Su 45 righe l’errore vale due: abbastanza per non trattare il conteggio come una tassonomia firmata.

Regola di decisione

Se il footer deve contenere più di dodici link, prendi un blocco a colonne con titoli e raggruppa per intento: prodotto, risorse, legale. Se i link sono meno di otto, il footer a riga singola di efferd costa meno manutenzione e non ha bisogno di griglia. L’alternativa è scriverlo a mano: un footer è una lista di link e due paragrafi, quindi una ventina di righe con grid e container query bastano, e ti risparmi una dipendenza che nessuno aggiornerà.

Le sezioni stanno su /blocks/category/footer e l’inventario completo su /blocks; il Footer 01 di Shadcn Space ha la sua scheda qui. Per la struttura dei link interni leggi la guida hub e spoke, per il comportamento su telefono la checklist mobile, e per il confronto tra copiare un blocco e usare una libreria headless copy-paste contro headless.