Navegación e pestanas

Documentación e exemplos de como usar os compoñentes de navegación incluídos en Bootstrap.

Nesta páxina

Navegación base

A navegación dispoñible en Bootstrap comparte estilos e marcas xerais, desde a .navclase base ata os estados activo e desactivado. Cambia as clases modificadoras para cambiar entre cada estilo.

O .navcompoñente base está construído con flexbox e proporciona unha base sólida para construír todo tipo de compoñentes de navegación. Inclúe algunhas substitucións de estilo (para traballar con listas), algúns recheos de ligazóns para áreas de acceso máis grandes e estilos básicos desactivados.

O .navcompoñente base non inclúe ningún .activeestado. Os seguintes exemplos inclúen a clase, principalmente para demostrar que esta clase en particular non activa ningún estilo especial.

Para transmitir o estado activo ás tecnoloxías de asistencia, use o aria-currentatributo, utilizando o pagevalor da páxina actual ou truedo elemento actual dun conxunto.

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>

As clases úsanse en todas partes, polo que o teu marcado pode ser moi flexible. Usa <ul>s como a anterior, <ol>se a orde dos teus artigos é importante, ou tira o teu propio cun <nav>elemento. Debido a que .navusa display: flex, as ligazóns de navegación se comportan do mesmo xeito que os elementos de navegación, pero sen o marcado adicional.

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>

Estilos dispoñibles

Cambia o estilo do .navcompoñente s con modificadores e utilidades. Mestura e combina segundo sexa necesario ou crea o teu propio.

Aliñación horizontal

Cambia a aliñación horizontal do teu navegador coas utilidades flexbox . De xeito predeterminado, os navegadores están aliñados á esquerda, pero podes cambialos facilmente ao centro ou á dereita.

Centrado 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>

Aliñado á dereita 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>

Vertical

Empile a súa navegación cambiando a dirección do elemento flexible coa .flex-columnutilidade. Necesitas apilalos nalgunhas vistas pero non noutras? Use as versións sensibles (por exemplo, .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>

Como sempre, a navegación vertical <ul>tamén é posible sen 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>

Fichas

Toma o navegador básico desde arriba e engade a .nav-tabsclase para xerar unha interface con pestanas. Utilízaos para crear rexións tabulables co noso complemento JavaScript de pestanas .

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>

Pastillas

Tome o mesmo HTML, pero use no seu .nav-pillslugar:

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>

Enche e xustifica

Forza o teu .navcontido para ampliar o ancho total dispoñible nunha das dúas clases de modificadores. Para encher proporcionalmente todo o espazo dispoñible cos teus .nav-item, usa .nav-fill. Teña en conta que todo o espazo horizontal está ocupado, pero non todos os elementos de navegación teñen o mesmo ancho.

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>

Ao usar unha <nav>navegación baseada en -, pode omitir con seguridade .nav-itemxa que só .nav-linké necesario para os elementos de estilo <a>.

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>

Para elementos de igual ancho, use .nav-justified. Todo o espazo horizontal estará ocupado por ligazóns de navegación, pero a diferenza do .nav-fillanterior, todos os elementos de navegación terán o mesmo ancho.

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>

Similar ao .nav-fillexemplo usando unha <nav>navegación baseada en -.

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>

Traballando con utilidades flexibles

Se necesitas variacións de navegación sensibles, considera usar unha serie de utilidades flexbox . Aínda que son máis detalladas, estas utilidades ofrecen unha maior personalización en puntos de interrupción sensibles. No seguinte exemplo, a nosa navegación apilarase no punto de interrupción máis baixo e, a continuación, adaptarase a un deseño horizontal que enche o ancho dispoñible a partir do punto de interrupción pequeno.

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>

En canto á accesibilidade

Se estás a usar navs para proporcionar unha barra de navegación, asegúrate de engadir un role="navigation"ao contenedor principal máis lóxico do <ul>, ou envolver un <nav>elemento ao redor de toda a navegación. Non engadas o papel ao <ul>propio, xa que isto evitaría que sexa anunciado como unha lista real polas tecnoloxías de asistencia.

Teña en conta que as barras de navegación, aínda que teñan un estilo visual como pestanas coa .nav-tabsclase, non se deben dar nin atributos. Estes só son apropiados para interfaces de pestanas dinámicas, como se describe no patrón de pestanas da Guía de prácticas de creación de ARIA . Consulte o comportamento de JavaScript para interfaces con pestanas dinámicas nesta sección para obter un exemplo. O atributo non é necesario nas interfaces de pestanas dinámicas xa que o noso JavaScript xestiona o estado seleccionado engadindo na pestana activa.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Usando menú despregable

Engade menús despregables cun HTML extra e o complemento JavaScript para menús despregables .

Pestanas con menú despregable

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>

Pastillas con menú despregable

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

Variables

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, agora os navegadores usan variables CSS locais en .nav, .nav-tabse .nav-pillspara unha personalización mellorada en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

Na .navclase 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};

Na .nav-tabsclase modificadora:

  --#{$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};

Na .nav-pillsclase modificadora:

  --#{$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};

Variables Sass

$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 de JavaScript

Use o complemento de JavaScript da pestana (inclúeo individualmente ou a través do bootstrap.jsficheiro compilado) para ampliar as nosas pestanas e pílulas de navegación para crear paneis de contido local con pestanas.

Este é un contido de marcador de posición o contido asociado da pestana Inicio. Facendo clic noutra pestana, alternarase a visibilidade desta para a seguinte. A pestana JavaScript intercambia clases para controlar a visibilidade do contido e o estilo. Podes usalo con pestanas, pílulas e calquera outra .navnavegación alimentada.

Este é un contido de marcador de posición o contido asociado da pestana Perfil . Facendo clic noutra pestana, alternarase a visibilidade desta para a seguinte. A pestana JavaScript intercambia clases para controlar a visibilidade do contido e o estilo. Podes usalo con pestanas, pílulas e calquera outra .navnavegación alimentada.

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>

Para axudarche a atender ás túas necesidades, isto funciona con <ul>marcas baseadas en -, como se mostra arriba, ou con calquera marcaxe arbitraria "roll your own". Teña en conta que se está a usar <nav>, non debe engadir role="tablist"directamente a el, xa que isto anularía o papel nativo do elemento como punto de referencia de navegación. En vez diso, cambia a un elemento alternativo (no exemplo de abaixo, un simple <div>) e envolve o elemento <nav>.

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>

O complemento tabs tamén funciona con pílulas.

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 pastillas verticais. Idealmente, para as pestanas verticais, tamén deberías engadir aria-orientation="vertical"ao contedor da lista de pestanas.

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>

Accesibilidade

As interfaces dinámicas con pestanas, tal e como se describe no patrón de pestanas da Guía de prácticas de creación de ARIA , requiren role="tablist", role="tab", role="tabpanel", e aria-atributos adicionais para transmitir a súa estrutura, funcionalidade e estado actual aos usuarios de tecnoloxías de asistencia (como lectores de pantalla). Como mellor práctica, recomendamos utilizar <button>elementos para as pestanas, xa que son controis que activan un cambio dinámico, en lugar de ligazóns que navegan a unha páxina ou localización nova.

De acordo co patrón de prácticas de creación de ARIA, só a pestana activa actualmente recibe o foco do teclado. Cando se inicialice o complemento de JavaScript, establecerase tabindex="-1"en todos os controis de pestanas inactivos. Unha vez que a pestana activa actualmente ten o foco, as teclas do cursor activan a pestana anterior/seguinte, co complemento cambiando o rovingtabindex en consecuencia. Non obstante, teña en conta que o complemento de JavaScript non distingue entre listas de pestanas horizontais e verticais cando se trata de interaccións coas teclas do cursor: independentemente da orientación da lista de pestanas, tanto o cursor arriba como a esquerda van á pestana anterior, e o cursor abaixo e dereito van a a seguinte pestana.

En xeral, para facilitar a navegación co teclado, recoméndase que os paneis das pestanas tamén se poidan enfocar, a non ser que o primeiro elemento que conteña contido significativo dentro do panel de pestanas xa estea enfocado. O complemento de JavaScript non trata de xestionar este aspecto; se é o caso, terás que facer que os teus paneis de pestanas sexan enfocados de forma explícita engadindo tabindex="0"o teu marcado.

O complemento de JavaScript de pestanas non admite interfaces con pestanas que conteñan menús despregables, xa que causan problemas de usabilidade e accesibilidade. Desde a perspectiva da usabilidade, o feito de que o elemento activador da pestana que se amosa actualmente non estea inmediatamente visible (xa que está dentro do menú despregable pechado) pode causar confusión. Desde o punto de vista da accesibilidade, actualmente non hai unha forma sensata de asignar este tipo de construción a un patrón WAI ARIA estándar, o que significa que non se pode facer facilmente comprensible para os usuarios de tecnoloxías de asistencia.

Usando atributos de datos

Podes activar unha navegación por pestanas ou pílulas sen escribir JavaScript simplemente especificando data-bs-toggle="tab"ou data-bs-toggle="pill"nun elemento. Use estes atributos de datos en .nav-tabsou .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>

Vía JavaScript

Activa as pestanas con tabulacións a través de JavaScript (cada pestana debe activarse individualmente):

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

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

Podes activar pestanas individuais de varias maneiras:

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

Efecto de desvanecemento

Para que as pestanas se desvanezan, engádase .fadea cada unha .tab-pane. O primeiro panel de pestanas tamén debe .showfacer visible o contido inicial.

<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>

Métodos

Métodos asíncronos e transicións

Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .

Consulte a nosa documentación de JavaScript para obter máis información .

Activa o teu contido como elemento de pestana.

Podes crear unha instancia de pestana co construtor, por exemplo:

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

Método	Descrición
`dispose`	Destrúe a pestana dun elemento.
`getInstance`	Método estático que che permite obter a instancia da pestana asociada a un elemento DOM, podes usalo así: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Método estático que devolve unha instancia de tabulación asociada a un elemento DOM ou crea unha nova no caso de que non se inicializou. Podes usalo así: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selecciona a pestana indicada e mostra o seu panel asociado. Calquera outra pestana que se seleccionase anteriormente non se selecciona e o seu panel asociado queda oculto. Volve ao interlocutor antes de que se amosara o panel de pestanas (é dicir, antes de `shown.bs.tab`que se produza o evento).

Eventos

Cando se mostra unha nova pestana, os eventos desenvólvense na seguinte orde:

hide.bs.tab(na pestana activa actual)
show.bs.tab(na pestana por mostrar)
hidden.bs.tab(na pestana activa anterior, a mesma que para o hide.bs.tabevento)
shown.bs.tab(na pestana que acaba de mostrarse activa, a mesma que para o show.bs.tabevento)

Se xa non estaba activa ningunha pestana, os eventos hide.bs.tabe hidden.bs.tabnon se activarán.

Tipo de evento	Descrición
`hide.bs.tab`	Este evento desenvólvese cando se quere mostrar unha nova pestana (e, polo tanto, debe ocultarse a pestana activa anterior). Use `event.target`e `event.relatedTarget`para orientar a pestana activa actual e a nova pestana que estará activa en breve, respectivamente.
`hidden.bs.tab`	Este evento desenvólvese despois de que se amose unha nova pestana (e polo tanto se oculta a pestana activa anterior). Use `event.target`e `event.relatedTarget`para apuntar á pestana activa anterior e á nova pestana activa, respectivamente.
`show.bs.tab`	Este evento desenvólvese na mostra de pestanas, pero antes de que se mostrase a nova pestana. Use `event.target`e `event.relatedTarget`para apuntar á pestana activa e á pestana activa anterior (se está dispoñible) respectivamente.
`shown.bs.tab`	Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use `event.target`e `event.relatedTarget`para orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente.

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
})