Sidebar

Barra di navigazione laterale che include liste di link diretti o annidati

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

Utilizza il componente Sidebar per navigare tra le pagine che appartengono a una sezione di un sito. A seconda dell'organizzazione dei contenuti, la barra di navigazione può presentare liste di link diretti o annidati sotto una voce che li raccoglie.

Alternative a questo componente

  • Tabs: per offrire un’esperienza di navigazione semplificata, sopratutto in caso di poche pagine o contenuti.
  • Navscroll: per fornire una navigazione veloce tra i contenuti presenti all’interno di una stessa pagina (navigazione tramite ancore).

Come usarlo

  • Indica la pagina corrente, utilizzando lo stato active sul link presente nella Sidebar.
  • Posiziona la Sidebar sul lato sinistro della viewport su dispositivi desktop, e prevedi una modalità di apertura e consultazione per dispositivi mobile.
  • Su desktop aggiungi una linea divisoria verticale tra la Sidebar e i contenuti di pagina per delineare la separazione tra le due sezioni, valuta di usare anche un colore di sfondo diverso.

Attenzione a

  • Usare le icone solo se sono utili a rafforzare il significato e facilitare la comprensione delle singole voci.
  • Non usare il componente per la navigazione principale (menu di primo livello) del sito, ma soltanto per navigare una specifica sezione che contiene sotto pagine (menu di secondo o terzo livello). Unica eccezione da valutare caso per caso potrebbe essere l'implementazione di un sito di documentazione.
  • Strutturare la corretta semantica HTML degli eventuali gruppi di link annidati. Consulta le considerazioni di accessibilità del componente Accordion.

Buone pratiche sui contenuti

  • Le singole voci della Sidebar devo essere brevi e descrittive dei contenuti su pagina.
  • Usa un titolo prima della lista di link per dare un contesto alla presenza della Sidebar.

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 formano la Sidebar

Il componente Sidebar è composto da:

  1. intestazione: definisce lo scopo della Sidebar;
  2. voce principale: può essere diretta ad una pagina o annidare altre voci;
  3. intestazione: definisce lo scopo della Sidebar;
  4. voce principale: può essere diretta ad una pagina o annidare altre voci;
  5. voce annidata: ha un margine di rientro e un peso visivo inferiore;
  6. bordo esterno: deliminta l'area della Sidebar in verticale, può essere a destra o sinistra in base alla posizione del menu;
  7. linea divisoria: divide le voci principali dalle secondarie;
  8. voce secondaria: ha un peso visivo minore rispetto alle principali;

Comportamento

  • Le liste di link annidati possono essere aperte o chiuse cliccando sulla voce che li raggruppa o sull'icona della freccia.
  • Possono essere aperte contemporaneamente più liste di link annidati.
  • Su mobile, la Sidebar può essere inserita in un pannello a scomparsa laterale, attivabile con un pulsante “Menu” da posizionare nell’interfaccia.

Specifiche di design

Tutte le misure indicate sono espresse in px.

Specifiche di design della Sidebar

Come iniziare

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

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

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