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

Tabs

La Tab bar organizza e permette la navigazione tra gruppi di contenuti che sono tra loro correlati ed allo stesso livello di gerarchia.

Ogni tab dovrebbe mostrare un contenuto distinto dalle altre.
Le tab non devono essere usate per dividere un contenuto che va letto in un dato ordine.

Le label delle tab devono essere corte e non abbreviate, a meno che non sia strettamente necessario.
Ogni bar deve contenere tab dello stesso tipo: non mescolare tab con icona e tab con testo.

Label testuale

1
2
3
4
5
6

<ul class="nav nav-tabs auto">
  <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
  <li class="nav-item"><a class="nav-link active" href="#">Attivo</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabilitato</a></li>
</ul>

sfondo colore primario

1
2
3
4
5
6
7
8

<div class="bg-primary p-3">
  <ul class="nav nav-tabs auto nav-dark">
    <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
    <li class="nav-item"><a class="nav-link active" href="#">Attivo</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Label</a></li>
    <li class="nav-item"><a class="nav-link disabled" href="#">Disabilitato</a></li>
  </ul>
</div>

Icona

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<ul class="nav nav-tabs auto">
  <li class="nav-item">
    <a class="nav-link" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
      <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-star-outline"></use></svg>
      <span class="visually-hidden">Breve testo esplicativo</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
      <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pa"></use></svg>
      <span class="visually-hidden">Breve testo esplicativo</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
      <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-comment"></use></svg>
      <span class="visually-hidden">Breve testo esplicativo</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label" tabindex="-1">
      <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-copy"></use></svg>
      <span class="visually-hidden">Breve testo esplicativo</span>
    </a>
  </li>
</ul>

sfondo colore primario

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="bg-primary p-3">
  <ul class="nav nav-tabs auto nav-dark">
    <li class="nav-item">
      <a class="nav-link" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
        <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="visually-hidden">Breve testo esplicativo</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
        <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pa"></use></svg>
        <span class="visually-hidden">Breve testo esplicativo</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
        <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="visually-hidden">Breve testo esplicativo</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label" tabindex="-1">
        <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-copy"></use></svg>
        <span class="visually-hidden">Breve testo esplicativo</span>
      </a>
    </li>
  </ul>
</div>

Accessibilità

Nel caso di di Tab bar con solo icone è obbligatorio fornire una descrizione in uno span di classe visually-hidden o con un testo alternativo, in modo che possa essere utilizzato anche da i non vedenti.
Inoltre, poichè il significato dell’icona non sempre risulta chiaro per gli utenti anche per gli utenti normodotati, è fortemente consigliato aggiungere un tooltip per aiutare la comprensione.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
      <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-star-outline"></use></svg>
        <span class="visually-hidden">Breve testo esplicativo</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
      <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pa"></use></svg>
        <span class="visually-hidden">Breve testo esplicativo</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link active" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label">
      <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-comment"></use></svg>
        <span class="visually-hidden">Breve testo esplicativo</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" data-bs-toggle="tooltip" data-placement="top" title="Label" tabindex="-1">
      <svg class="icon"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-copy"></use></svg>
      <span class="visually-hidden">Breve testo esplicativo</span>
    </a>
  </li>
</ul>

Abilitazione tooltip

Per abilitare il funzionamento dei tooltip, nella pagina deve essere inserito il seguente codice:

<script>
  document.addEventListener("DOMContentLoaded", function() { 
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  })    
</script>