Header

La testata e il menu di navigazione del sito o servizio

Componenti

Metadati e link per approfondire

Anteprima

Per visualizzare la modalità desktop è necessario uno schermo sufficientemente largo.

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

È necessario utilizzare il componente Header all'inizio di ogni pagina di un sito o servizio digitale della Pubblica Amministrazione italiana.

La sua presenza, infatti, aiuta le persone ad orientarsi tra siti e servizi di enti diversi, mantenendo coerente l’esperienza di navigazione.

Il componente è parte importante dell'identità di design system .italia, da usare o personalizzare nei contenuti e nei colori a seconda della scala, nazionale, territoriale e/o locale, del servizio digitale.

Come usarlo

La lista dei casi d’uso possibili per ciascuna variante del componente header.

Slim Header

Lo Slim header è una porzione dell'header più compatta e flessibile che può indicare l'appartenenza del sito o servizio a una categoria o a un ordine gerarchico.

Ecco alcuni possibili casi d’uso:

  • pagina di login/registrazione: consente alle persone di concentrarsi sull’azione primaria;
  • pagine di contenuto focalizzato: es. articoli o pagine di prodotto, nelle quali l’Header slim mantiene informazioni di navigazione essenziali;
  • applicazioni di terze parti: può essere utilizzato nelle schermate in cui è necessario mostrare solo un titolo o un'icona di ritorno alla schermata precedente, riducendo al minimo la presenza di elementi di navigazione;
  • dashboard o pannelli di controllo: in un ambiente di amministrazione, l'Header slim può contenere informazioni chiave come il nome dell'utente, le notifiche e l'accesso rapido alle funzionalità principali, contribuendo a mantenere la vista generale del dashboard più pulita e concentrata.

Header centrale

L’Header centrale è una parte essenziale perché include il brand dell’ente e la sua descrizione. L’accesso al motore di ricerca e link aggiuntivi ai social media completano il componente.

Essendo priva di navigazione, questa variante è raccomandata per tutti quei casi in cui i contenuti si sviluppano su unica pagina. Ad esempio:

  • landing page;
  • pagina di invito dati (es. tramite un form);
  • pagine di supporto (conferma, errore 404, etc.).

A differenza della variante Slim header, l’Header centrale preserva il brand garantendo una maggiore visibilità.

Header completa

L’Header completa include tutte le altre varianti in un unico componente. È quindi la versione che si presta a qualsiasi caso d’uso.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione

Visivamente accessibile

Da verificare

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Da verificare

Struttura titolazioni, etichette e testi alternativi

Navigabile

Da verificare

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Da verificare

Comprensibile, prevedibile, gestione semplice dell’errore

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system

Anatomia

Gli elementi che compongono l'header completo

L'Header completo è composto da tre elementi principali:

  1. Header slim
  2. Header centrale
  3. Header nav

Ciascuno di essi prevede una serie di elementi particolari.

Header slim

Gli elementi che compongono l'header slim

L'Header slim è composto da tre elementi:

  1. ente di appartenenza: prevede il link ad un sito esterno;
  2. selettore lingua: modifica la traduzione di tutti i contenuti del sito;
  3. pulsante di accesso: abilita il login all'area personale laddove disponibile.

Header centrale

Gli elementi che compongono l'header centrale

L'Header centrale è composto da cinque elementi:

  1. icona o logo dell'ente;
  2. nome dell'ente in formato testuale;
  3. eventuale sottotitolo (tag line) che descrive la natura dell'ente;
  4. canali social dell'ente;
  5. link alla ricerca.

Header nav

Gli elementi che compongono l'header nav

L'Header nav contiene due diversi menu di navigazione:

  1. menu primario: contiene le voci del primo livello di navigazione;
  2. menu secondario: contiene le voci di navigazione trasversale rispetto all'alberatura dei contenuti (es. tag o argomenti).

Comportamento

Tutte le varianti di Header sono responsive, quindi si adattano alla viewport di qualsiasi dispositivo.

Interazioni

Su dispositivi mobile o touch, il menu di navigazione non è direttamente visibile in pagina ma si apre tramite click/tap sull’icona menu, con un’animazione di ingresso da sinistra verso destra.

I link del menu di navigazione che prevedono un sottomenu espandibile ereditano le interazioni del componente dropdown.

L’accesso alla barra di ricerca può avvenire in due modi:

  • tramite link alla pagina dedicata;
  • tramite l’apertura di una finestra (overlay) rimanendo nella stessa pagina.

Specifiche di design

Tutte le misure sono indicate in px.

Header slim con la misura di tutte le spaziature
Header centrale con la misura di tutte le spaziature
Header nav con la misura di tutte le spaziature

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Per visualizzare la modalità desktop è necessario uno schermo sufficientemente largo.

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici