Tabs
Organizza i contenuti in schede indipendenti a comparsa.
Per rendere tali interfacce navigabili è necessario collegare Tab e Pannelli collegando il tag <a> dei primi all’attributo id dei secondi, come mostrato di seguito.
Opzionalmente, è possibile aggiungere al bottone della tab un'icona, utilizzando un file svg.
Per fare in modo che i tab appaiano con un’animazione “a comparsa” (fade in), è sufficiente aggiungere la classe .fade ad ogni .tab-pane. Il primo .tab-pane dovrà anche avere la classe .show per rendere il contenuto iniziale visibile.
In assenza della classe .auto i tab vengono dimensionati in base al contenuto.
Contenuto 1
Contenuto 2
<ul class="nav nav-tabs nav-tabs-icon-text" id="myTab3" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1c-tab" data-bs-toggle="tab" href="#tab1b" role="tab" aria-controls="tab1b" aria-selected="true">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2b-tab" data-bs-toggle="tab" href="#tab2b" role="tab" aria-controls="tab2b" aria-selected="false">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 2
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab4b-tab" data-bs-toggle="tab" href="#tab4b" role="tab" aria-controls="tab3b" aria-selected="false" aria-disabled="true" tabindex="-1">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 3
</a>
</li>
</ul>
<div class="tab-content" id="myTab3Content">
<div class="tab-pane p-4 fade show active" id="tab1b" role="tabpanel" aria-labelledby="tab1c-tab"><p>Contenuto 1</p></div>
<div class="tab-pane p-4 fade" id="tab2b" role="tabpanel" aria-labelledby="tab2b-tab"><p>Contenuto 2</p></div>
<div class="tab-pane p-4 fade" id="tab4b" role="tabpanel" aria-labelledby="tab4b-tab">Contenuto 3 (non raggiungibile, il tab relativo è disabilitato)</div>
</div>Tab orizzontali solo icone
Qualora si utilizzassero solo icone per la navigazione fra tab, si abbia la cura di includere all’interno del link un elemento <span> con classe .visually-hidden contenente la descrizione dedicata agli screen reader. La classe .visually-hidden impedisce la visualizzazione del testo sui browser visuali.
La classe visually-hidden sotituisce in Bootstrap5 la classe sr-only.
Il tema garantisce compatibilità all'indietro, renderizzando sr-only - se ancora presente - in maniera analoga a visually-hidden
Contenuto 1
Contenuto 2
<ul class="nav nav-tabs nav-tabs-icon" id="myTab2" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab1a-tab" data-bs-toggle="tab" href="#tab1a" role="tab" aria-controls="tab1a" aria-selected="true">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-link"></use></svg>
<span class="visually-hidden"> Tab titolo 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2a-tab" data-bs-toggle="tab" href="#tab2a" role="tab" aria-controls="tab2a" aria-selected="false">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-link"></use></svg>
<span class="visually-hidden"> Tab titolo 2</span>
</a>
</li>
</ul>
<div class="tab-content" id="myTab2Content">
<div class="tab-pane p-4 fade show active" id="tab1a" role="tabpanel" aria-labelledby="tab1a-tab"><p>Contenuto 1</p></div>
<div class="tab-pane p-4 fade" id="tab2a" role="tabpanel" aria-labelledby="tab2a-tab"><p>Contenuto 2</p></div>
</div>Tab verticali
Utilizzando gli strumenti di layout di Bootstrap 5 è possibile realizzare tab a orientamento verticale. Al <div> contenitore dei link dei tab va aggiunta la classe .nav-tabs-vertical. Per quanto riguarda l'uso delle icone e delle indicazioni per gli screen reader, non vi sono differenze rispetto a quanto detto per le tab orizzontali.
<div class="bd-example-tabs">
<div class="row">
<div class="col-4 col-md-3">
<div class="nav nav-tabs nav-tabs-vertical" id="nav-vertical-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="nav-vertical-tab1-tab" data-bs-toggle="tab" href="#nav-vertical-tab1" role="tab" aria-controls="nav-vertical-tab1" aria-selected="true">Tab 1</a>
<a class="nav-link" id="nav-vertical-tab2-tab" data-bs-toggle="tab" href="#nav-vertical-tab2" role="tab" aria-controls="nav-vertical-tab2" aria-selected="false">Tab 2</a>
<a class="nav-link" id="nav-vertical-tab3-tab" data-bs-toggle="tab" href="#nav-vertical-tab3" role="tab" aria-controls="nav-vertical-tab3" aria-selected="false">Tab 3</a>
</div>
</div>
<div class="col-8 col-md-9">
<div class="tab-content" id="nav-vertical-tabContent">
<div class="tab-pane p-3 fade show active" id="nav-vertical-tab1" role="tabpanel" aria-labelledby="nav-vertical-tab1-tab">Contenuto 1</div>
<div class="tab-pane p-3 fade" id="nav-vertical-tab2" role="tabpanel" aria-labelledby="nav-vertical-tab2-tab">Contenuto 2</div>
<div class="tab-pane p-3 fade" id="nav-vertical-tab3" role="tabpanel" aria-labelledby="nav-vertical-tab3-tab">Contenuto 3</div>
</div>
</div>
</div>
</div>Su sfondo scuro
Per visualzzare le tab su sfondo scuro, utilizzare la classe .nav-dark associandola al tag ul.
Contenuto 1
<ul class="nav nav-tabs nav-tabs-icon-text nav-dark" id="myTab6" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="tab6b-tab" data-bs-toggle="tab" href="#tab6b" role="tab" aria-controls="tab6b" aria-selected="true">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab7b-tab" data-bs-toggle="tab" href="#tab7b" role="tab" aria-controls="tab7b" aria-selected="false" aria-disabled="true" tabindex="-1">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 2
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" id="tab7c-tab" data-bs-toggle="tab" href="#tab7c" role="tab" aria-controls="tab7c" aria-selected="false" aria-disabled="true" tabindex="-1">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-link"></use></svg> Tab 3
</a>
</li>
</ul>
<div class="tab-content" id="myTab3Content">
<div class="tab-pane p-4 fade show active" id="tab6b" role="tabpanel" aria-labelledby="tab6b-tab"><p>Contenuto 1</p></div>
<div class="tab-pane p-4 fade" id="tab7b" role="tabpanel" aria-labelledby="tab7b-tab">Contenuto 2 </div>
<div class="tab-pane p-4 fade" id="tab7c" role="tabpanel" aria-labelledby="tab7c-tab">Contenuto 3 (non raggiungibile, tab disabilitato)</div>
</div>