Breadcrumbs

Stato del componente:Pronto

Le breadcrumbs aiutano gli utenti a capire dove si trovano nella struttura di un sito e a navigare tra i vari livelli

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Inizio componente:Fine componente.
Risoluzione

Quando usarlo

Usa il componente Breadcrumbs quando un sito presenta molti contenuti, organizzati su più di due livelli gerarchici, e gli utenti hanno bisogno di spostarsi velocemente tra i vari livelli.

Come usarlo

  • Come elemento di navigazione secondaria
  • Posizionato in alto a sinistra dopo l’header e la navigazione, ma prima del titolo di pagina

Attenzione a

  • Non usarlo per sostituire il menu di navigazione principale
  • Non usarlo per indicare il progresso di un flusso transazionale lineare, come la richiesta di un servizio o un pagamento
  • Non usarlo per un sito che presenta un solo livello di architettura

Buone pratiche sui contenuti

I titoli delle breadcrumb devono corrispondere ai titoli delle pagine a cui si riferiscono

Alternative a questo componente

  • Progress indicators, utile a indicare il progresso di un flusso transazionale lineare, come la richiesta di un servizio o un pagamento.

Accessibilità

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

CaratteristicaStatoDescrizione

Visivamente accessibile

Pronto

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Pronto

Struttura titolazioni, etichette e testi alternativi

Navigabile

Pronto

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Pronto

Comprensibile, prevedibile, gestione semplice dell’errore

Stato del componente

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

LibreriaStato componenteLink

UI Kit (design)

ProntoKit nel kit UI Figma (si apre in una nuova finestra)

Bootstrap Italia

ProntoScheda documentazione (si apre in una nuova finestra)

React

Da rivedereScheda storybook (si apre in una nuova finestra)

Angular

Non presente

Anatomia

Immagine in via di definizione

  1. Pagina del livello superiore con link: indica il titolo della pagina del livello superiore e ne permette la navigazione tramite link
  2. Separatore: distingue le pagine
  3. Pagina corrente: indica il titolo della pagina su cui si trova l’utente

Comportamento

Tutti i titoli di pagina nel componente breadcrumb devono essere interattivi e rimandare alle rispettive pagine, ad eccezione della pagina corrente. I separatori non sono interattivi.

Interazione

  • Mouse: gli utenti cliccano sui link delle breadcrumb per raggiungere le pagine corrispondenti.

  • Tastiera: gli utenti navigano tra i link delle breadcrumb premendo Tab e Shift-Tab e raggiungono le pagine corrispondenti premendo Enter, una volta che il link è in focus.

Specifiche di design

In stesura

Come iniziare

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

Anteprima

Inizio componente:Fine componente.
Risoluzione

Come iniziare

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