Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Breadcrumbs

Breadcrumbs

Le Breadcrumbs sono un modello di navigazione secondario che aiuta l’utente a comprendere la gerarchia tra i livelli e tornare indietro attraverso di essi.
Esse forniscono all’utente un feedback relativo sia alla pagina che al percorso di navigazione.

Le Linee Guida per il design digitale di Regione Lombardia prevedono breadcrumbs con e senza icone.

Home
Secondo livello
Terzo livello 
1
2
3
4
5
6
7

<nav class="breadcrumb-container" aria-label="Percorso di navigazione">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a><span class="separator">/</span></li>
    <li class="breadcrumb-item"><a href="#">Secondo livello</a><span class="separator">/</span></li>
    <li class="breadcrumb-item active" aria-current="page">Terzo Livello</li>
  </ol>
</nav>

1
2
3
4
5
6
7

<nav class="breadcrumb-container" aria-label="Percorso di navigazione">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a><span class="separator">&gt;</span></li>
    <li class="breadcrumb-item"><a href="#">Secondo livello</a><span class="separator">&gt;</span></li>
    <li class="breadcrumb-item active" aria-current="page">Terzo Livello</li>
  </ol>
</nav>
Home
Secondo livello
Terzo livello 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<nav class="breadcrumb-container" aria-label="Percorso di navigazione">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <svg class="icon icon-sm icon-secondary align-top me-1" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pa"></use></svg>
      <a href="#">Home</a>
      <span class="separator">/</span>
    </li>
    <li class="breadcrumb-item">
      <svg class="icon icon-sm icon-secondary align-top me-1" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-box"></use></svg>
      <a href="#">Secondo livello</a><span class="separator">/</span>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      <svg class="icon icon-sm icon-secondary align-top me-1" aria-hidden="true"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-files"></use></svg>
      Terzo Livello
    </li>
  </ol>
</nav>