Breadcrumb

Le breadcrumb, letteralmente briciole di pane, aiutano l’utente a capire la posizione attuale all'interno del portale. Grazie a questo componente, e quindi all'identificazione degli step che lo hanno condotto alla pagina corrente, l'utente potrà navigare in maniera più efficiente all’interno della gerarchia del sito.
In questa pagina potrai reperire la User Interface, lo snippet e le modalità di utilizzo per le breadcrumb nell'Ecosistema digitale Turismo Cultura. 

                                            
<nav class="dms-breadcrumb" aria-label="breadcrumb">
    <ul class="align-self-center">
        <li><a href="https://www.regione.puglia.it" target="_blank"
                title="Vai al sito della Regione Puglia">Regione
                Puglia</a></li>
        <li><a a href="https://www.regione.puglia.it/web/turismo-e-cultura"
                target="_blank"
                title="Vai al sito di Turismo e Cultura">Turismo e
                Cultura</a></li>
        <li class="active" aria-current="page">DMS Puglia</li>
    </ul>
</nav>

Utilizzo

Per garantire una corretta usabilità, occorre posizionare il componente successivamente alla chiusura dell'elemento header.

Ai fini dell'accessibilità è obbligatorio:

  • applicare l'attributo aria-label="breadcrumb" all'elemento.
  • configurare come link ogni voce, eccetto l'ultima (vedi esempio)

E' possibile, inoltre, cambiare il colore della breadcrumb applicando una delle classi elencate nella pagina colori all'elemento <div class="dms-breadcrumb"> , ad esempio <div class="dms-breadcrumb white-clr--txt" (come nel caso dell'header) oppure rendere il componente in maiuscolo, applicando semplicemente la classe text-uppercase al testo.

Infine, è importante sottolineare che la breadcrumb è un pattern aggiuntivo e non sostitutivo del menù di navigazione primario.