Navigatori e schede

Documentazione ed esempi su come utilizzare i componenti di navigazione inclusi in Bootstrap.

Su questa pagina

nav di base

La navigazione disponibile in Bootstrap condivide il markup e gli stili generali, dalla .navclasse base agli stati attivo e disabilitato. Scambia le classi di modificatori per passare da uno stile all'altro.

Il .navcomponente di base è costruito con flexbox e fornisce una solida base per la costruzione di tutti i tipi di componenti di navigazione. Include alcune sostituzioni di stile (per lavorare con gli elenchi), alcuni spazi di riempimento dei collegamenti per aree di successo più grandi e uno stile disabilitato di base.

Il .navcomponente di base non include alcuno .activestato. Gli esempi seguenti includono la classe, principalmente per dimostrare che questa particolare classe non attiva alcuno stile speciale.

Per trasmettere lo stato attivo alle tecnologie assistive, utilizzare l' aria-currentattributo, utilizzando il pagevalore per la pagina corrente o trueper l'elemento corrente in un set.

html

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Le lezioni vengono utilizzate ovunque, quindi il tuo markup può essere super flessibile. Usa <ul>s come sopra, <ol>se l'ordine dei tuoi articoli è importante, o arrotola il tuo con un <nav>elemento. Poiché .navutilizza display: flex, i collegamenti di navigazione si comportano come farebbero gli elementi di navigazione, ma senza il markup aggiuntivo.

html

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Stili disponibili

Cambia lo stile del .navcomponente s con modificatori e utilità. Mescola e abbina secondo necessità o creane uno tuo.

Allineamento orizzontale

Modifica l'allineamento orizzontale del tuo navigatore con le utility flexbox . Per impostazione predefinita, i nav sono allineati a sinistra, ma puoi facilmente cambiarli al centro o allineati a destra.

Centrato con .justify-content-center:

html

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Allineato a destra con .justify-content-end:

html

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Verticale

Impila la tua navigazione cambiando la direzione dell'elemento flessibile con l' .flex-columnutilità. Hai bisogno di impilarli su alcune finestre ma non su altre? Utilizzare le versioni reattive (ad es .flex-sm-column. ).

html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Come sempre, la navigazione verticale è possibile <ul>anche senza s.

html

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Schede

Prende la navigazione di base dall'alto e aggiunge la .nav-tabsclasse per generare un'interfaccia a schede. Usali per creare regioni tabbable con il nostro plug-in JavaScript per schede .

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Pillole

Prendi lo stesso HTML, ma usa .nav-pillsinvece:

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Riempi e giustifica

Forza il .navcontenuto di ' per estendere l'intera larghezza disponibile di una delle due classi di modificatori. Per riempire proporzionalmente tutto lo spazio disponibile con .nav-itemi tuoi messaggi di posta elettronica, usa .nav-fill. Si noti che tutto lo spazio orizzontale è occupato, ma non tutti gli elementi di navigazione hanno la stessa larghezza.

html

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Quando si utilizza una <nav>navigazione basata su, è possibile omettere in sicurezza .nav-itempoiché .nav-linkè richiesto solo per <a>gli elementi di stile.

html

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Per elementi di uguale larghezza, utilizzare .nav-justified. Tutto lo spazio orizzontale sarà occupato dai collegamenti di navigazione, ma a differenza di quanto .nav-fillsopra, ogni elemento di navigazione avrà la stessa larghezza.

html

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Simile .nav-fillall'esempio che utilizza una <nav>navigazione basata su.

html

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Lavorare con utility flessibili

Se hai bisogno di variazioni di navigazione reattive, prendi in considerazione l'utilizzo di una serie di utilità flexbox . Sebbene più dettagliate, queste utilità offrono una maggiore personalizzazione attraverso punti di interruzione reattivi. Nell'esempio seguente, il nostro nav sarà impilato sul punto di interruzione più basso, quindi si adatterà a un layout orizzontale che riempia la larghezza disponibile a partire dal punto di interruzione piccolo.

html

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

Per quanto riguarda l'accessibilità

Se stai usando navs per fornire una barra di navigazione, assicurati di aggiungere a role="navigation"al contenitore padre più logico di <ul>, o avvolgi un <nav>elemento attorno all'intera navigazione. Non aggiungere il ruolo allo <ul>stesso, in quanto ciò eviterebbe che venga annunciato come una vera e propria lista dalle tecnologie assistive.

Nota che le barre di navigazione, anche se visivamente stilizzate come schede con la .nav-tabsclasse, non devono essere fornite o attributi . Questi sono appropriati solo per le interfacce a schede dinamiche, come descritto in ARIA Authoring Practices Guide tabs pattern . Per un esempio, vedere il comportamento JavaScript per le interfacce a schede dinamiche in questa sezione. L' attributo non è necessario sulle interfacce a schede dinamiche poiché il nostro JavaScript gestisce lo stato selezionato aggiungendolo alla scheda attiva.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Utilizzo dei menu a discesa

Aggiungi menu a discesa con un po' di HTML in più e il plug-in JavaScript a discesa .

Schede con menu a discesa

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Pillole con menu a discesa

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

CSS

Variabili

Aggiunto nella v5.2.0

Come parte dell'approccio in evoluzione delle variabili CSS di Bootstrap, i nav ora utilizzano variabili CSS locali su .nav, .nav-tabs, e .nav-pillsper una migliore personalizzazione in tempo reale. I valori per le variabili CSS vengono impostati tramite Sass, quindi anche la personalizzazione di Sass è ancora supportata.

Sulla .navclasse base:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Sulla .nav-tabsclasse modificatore:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Sulla .nav-pillsclasse modificatore:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

variabili Sas

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Comportamento JavaScript

Usa il plug-in JavaScript delle schede, includilo individualmente o tramite il file compilato bootstrap.js, per estendere le nostre schede di navigazione e pillole per creare riquadri tabbable di contenuto locale.

Si tratta di alcuni contenuti segnaposto contenuti associati alla scheda Home . Facendo clic su un'altra scheda si alternerà la visibilità di questa per la successiva. La scheda JavaScript scambia le classi per controllare la visibilità e lo stile del contenuto. Puoi usarlo con schede, pillole e qualsiasi altra .navnavigazione potenziata.

Si tratta di alcuni contenuti segnaposto contenuti associati alla scheda Profilo . Facendo clic su un'altra scheda si alternerà la visibilità di questa per la successiva. La scheda JavaScript scambia le classi per controllare la visibilità e lo stile del contenuto. Puoi usarlo con schede, pillole e qualsiasi altra .navnavigazione potenziata.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

Per soddisfare le tue esigenze, questo funziona con <ul>il markup basato su, come mostrato sopra, o con qualsiasi markup arbitrario "roll your own". Tieni presente che se stai utilizzando <nav>, non dovresti aggiungere role="tablist"direttamente ad esso, poiché ciò annullerebbe il ruolo nativo dell'elemento come punto di riferimento di navigazione. Invece, passa a un elemento alternativo (nell'esempio seguente, un semplice <div>) e avvolgilo <nav>attorno.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Il plugin delle schede funziona anche con le pillole.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

E con le pillole verticali. Idealmente, per le schede verticali, dovresti anche aggiungere aria-orientation="vertical"al contenitore dell'elenco delle schede.

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Accessibilità

Le interfacce a schede dinamiche, come descritto nel modello di schede ARIA Authoring Practices Guide , richiedono role="tablist", role="tab", role="tabpanel"e aria-attributi aggiuntivi per trasmettere la loro struttura, funzionalità e stato corrente agli utenti di tecnologie assistive (come gli screen reader). Come best practice, consigliamo di utilizzare <button>elementi per le schede, poiché si tratta di controlli che attivano una modifica dinamica, anziché collegamenti che accedono a una nuova pagina o posizione.

In linea con il modello ARIA Authoring Practices, solo la scheda attualmente attiva riceve lo stato attivo della tastiera. Quando il plug-in JavaScript viene inizializzato, verrà impostato tabindex="-1"su tutti i controlli a schede inattivi. Una volta che la scheda attualmente attiva è attiva, i tasti cursore attivano la scheda precedente/successiva, con il plug-in che modifica il rovingtabindex di conseguenza. Tuttavia, si noti che il plug-in JavaScript non distingue tra elenchi di schede orizzontali e verticali quando si tratta di interazioni con i tasti del cursore: indipendentemente dall'orientamento dell'elenco di schede, sia il cursore su e quello sinistro vanno alla scheda precedente, mentre il cursore giù e quello destro vanno a la scheda successiva.

In generale, per facilitare la navigazione da tastiera, si consiglia di rendere attivabili anche i pannelli a schede, a meno che il primo elemento contenente contenuto significativo all'interno del pannello a schede non sia già attivabile. Il plug-in JavaScript non tenta di gestire questo aspetto: se del caso, dovrai rendere esplicitamente focalizzabili i tuoi pannelli a schede aggiungendo tabindex="0"il tuo markup.

Il plug-in JavaScript della scheda non supporta le interfacce a schede che contengono menu a discesa, poiché causano problemi di usabilità e accessibilità. Dal punto di vista dell'usabilità, il fatto che l'elemento trigger della scheda attualmente visualizzata non sia immediatamente visibile (poiché si trova all'interno del menu a discesa chiuso) può causare confusione. Dal punto di vista dell'accessibilità, attualmente non esiste un modo sensato per mappare questo tipo di costrutto su un modello WAI ARIA standard, il che significa che non può essere facilmente reso comprensibile agli utenti delle tecnologie assistive.

Utilizzo degli attributi dei dati

Puoi attivare una navigazione con tab o pill senza scrivere JavaScript semplicemente specificando data-bs-toggle="tab"o data-bs-toggle="pill"su un elemento. Utilizzare questi attributi di dati su .nav-tabso .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Tramite JavaScript

Abilita le schede tabb tramite JavaScript (ogni scheda deve essere attivata singolarmente):

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Puoi attivare singole schede in diversi modi:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Effetto dissolvenza

Per far sfumare le schede, aggiungi .fadea ciascuna .tab-pane. Il primo riquadro delle schede deve anche .showrendere visibile il contenuto iniziale.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Metodi

Metodi e transizioni asincrone

Tutti i metodi API sono asincroni e avviano una transizione . Ritornano al chiamante non appena la transizione è iniziata ma prima che termini . Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .

Consulta la nostra documentazione JavaScript per ulteriori informazioni .

Attiva il tuo contenuto come elemento di scheda.

Puoi creare un'istanza di tab con il costruttore, ad esempio:

const bsTab = new bootstrap.Tab('#myTab')

Metodo	Descrizione
`dispose`	Distrugge la scheda di un elemento.
`getInstance`	Metodo statico che ti permette di ottenere l'istanza della scheda associata a un elemento DOM, puoi usarlo in questo modo: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Metodo statico che restituisce un'istanza di tab associata a un elemento DOM o ne crea una nuova nel caso non sia stata inizializzata. Puoi usarlo in questo modo: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Seleziona la scheda data e mostra il riquadro associato. Qualsiasi altra scheda precedentemente selezionata viene deselezionata e il riquadro associato viene nascosto. Ritorna al chiamante prima che il riquadro delle schede sia stato effettivamente mostrato (cioè prima `shown.bs.tab`che si verifichi l'evento).

Eventi

Quando viene visualizzata una nuova scheda, gli eventi si attivano nel seguente ordine:

hide.bs.tab(nella scheda attiva corrente)
show.bs.tab(nella scheda da mostrare)
hidden.bs.tab(nella scheda attiva precedente, la stessa hide.bs.tabdell'evento)
shown.bs.tab(nella scheda appena mostrata appena attiva, la stessa show.bs.tabdell'evento)

Se nessuna scheda era già attiva, gli eventi hide.bs.tabe hidden.bs.tabnon verranno attivati.

Tipo di evento	Descrizione
`hide.bs.tab`	Questo evento si attiva quando deve essere visualizzata una nuova scheda (e quindi la scheda attiva precedente deve essere nascosta). Utilizzare `event.target`e `event.relatedTarget`per scegliere come target rispettivamente la scheda attiva corrente e la nuova scheda che sarà presto attiva.
`hidden.bs.tab`	Questo evento si attiva dopo che viene mostrata una nuova scheda (e quindi la scheda attiva precedente viene nascosta). Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva precedente e la nuova scheda attiva.
`show.bs.tab`	Questo evento si attiva alla visualizzazione della scheda, ma prima che venga mostrata la nuova scheda. Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
`shown.bs.tab`	Questo evento si attiva alla visualizzazione delle schede dopo che è stata mostrata una scheda. Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})