Navegaciones y pestañas

Documentación y ejemplos sobre cómo usar los componentes de navegación incluidos de Bootstrap.

En esta página

Navegación base

La navegación disponible en Bootstrap comparte marcas y estilos generales, desde la .navclase base hasta los estados activo y deshabilitado. Cambia las clases de modificadores para cambiar entre cada estilo.

El .navcomponente base está construido con flexbox y proporciona una base sólida para construir todo tipo de componentes de navegación. Incluye algunas anulaciones de estilo (para trabajar con listas), algo de relleno de enlaces para áreas de acceso más grandes y estilo básico deshabilitado.

El .navcomponente base no incluye ningún .activeestado. Los siguientes ejemplos incluyen la clase, principalmente para demostrar que esta clase en particular no activa ningún estilo especial.

Para transmitir el estado activo a las tecnologías de asistencia, use el aria-currentatributo: use el pagevalor para la página actual o truepara el elemento actual en un conjunto.

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>

Las clases se utilizan en todo momento, por lo que su marcado puede ser súper flexible. Use <ul>s como arriba, <ol>si el orden de sus artículos es importante, o ruede el suyo con un <nav>elemento. Debido a que .navuses display: flex, los enlaces de navegación se comportan igual que los elementos de navegación, pero sin el 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 disponibles

Cambie el estilo del .navcomponente s con modificadores y utilidades. Mezcle y combine según sea necesario, o construya el suyo propio.

Alineación horizontal

Cambie la alineación horizontal de su navegador con las utilidades flexbox . De forma predeterminada, los navegadores están alineados a la izquierda, pero puede cambiarlos fácilmente para que estén alineados al centro o a la derecha.

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>

Alineado a la derecha 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

Apila tu navegación cambiando la dirección del elemento flexible con la .flex-columnutilidad. ¿Necesita apilarlos en algunas ventanas gráficas pero no en otras? Utilice las versiones receptivas (p. ej., .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 siempre, la navegación vertical <ul>también es posible sin 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>

Pestañas

Toma la navegación básica de arriba y agrega la .nav-tabsclase para generar una interfaz con pestañas. Úselos para crear regiones tabulables con nuestro complemento JavaScript de pestañas .

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 ese mismo HTML, pero use en su .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>

Llena y justifica

Fuerce el .navcontenido de su 's para extender el ancho total disponible en una de las dos clases de modificadores. Para llenar proporcionalmente todo el espacio disponible con su .nav-items, use .nav-fill. Observe que todo el espacio horizontal está ocupado, pero no todos los elementos de navegación tienen el mismo 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>

Al usar una <nav>navegación basada en , puede omitir de manera segura .nav-itemya que solo .nav-linkse requiere para diseñar <a>elementos.

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 el espacio horizontal estará ocupado por enlaces de navegación, pero a diferencia de lo .nav-fillanterior, cada elemento de navegación tendrá el mismo 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 al .nav-fillejemplo usando una <nav>navegación basada 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>

Trabajando con utilidades flexibles

Si necesita variaciones de navegación receptivas, considere usar una serie de utilidades flexbox . Si bien son más detalladas, estas utilidades ofrecen una mayor personalización en los puntos de interrupción receptivos. En el ejemplo a continuación, nuestra navegación se apilará en el punto de interrupción más bajo, luego se adaptará a un diseño horizontal que llena el ancho disponible a partir del punto de interrupción pequeño.

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 cuanto a la accesibilidad

Si está utilizando navs para proporcionar una barra de navegación, asegúrese de agregar role="navigation"al contenedor principal más lógico del <ul>, o ajuste un <nav>elemento alrededor de toda la navegación. No agregue el rol en <ul>sí mismo, ya que esto evitaría que las tecnologías de asistencia lo anuncien como una lista real.

Tenga en cuenta que a las barras de navegación, incluso si tienen un estilo visual como pestañas con la .nav-tabsclase, no se les debe dar ni atributos. Estos solo son apropiados para interfaces con pestañas dinámicas, como se describe en el patrón de pestañas de la Guía de prácticas de creación de ARIA . Consulte el comportamiento de JavaScript para interfaces con pestañas dinámicas en esta sección para ver un ejemplo. El atributo no es necesario en las interfaces con pestañas dinámicas ya que nuestro JavaScript maneja el estado seleccionado al agregarlo en la pestaña activa.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Usar menús desplegables

Agregue menús desplegables con un poco de HTML adicional y el complemento JavaScript de menús desplegables .

Pestañas con menús desplegables

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ús desplegables

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

Añadido en v5.2.0

Como parte del enfoque de variables CSS en evolución de Bootstrap, los navegadores ahora usan variables CSS locales en .nav, .nav-tabsy .nav-pillspara mejorar la personalización en tiempo real. Los valores para las variables CSS se establecen a través de Sass, por lo que también se admite la personalización de Sass.

En la .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};

En la .nav-tabsclase de modificador:

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

En la .nav-pillsclase de modificador:

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

Sass variables

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

Comportamiento de JavaScript

Use el complemento JavaScript de pestañas, inclúyalo individualmente o a través del archivo compilado bootstrap.js, para ampliar nuestras pestañas y píldoras de navegación para crear paneles de contenido local en los que se pueden tabular.

Este es un contenido de marcador de posición asociado a la pestaña Inicio . Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido. Puede usarlo con pestañas, píldoras y cualquier otra .navnavegación potenciada.

Este es un contenido de marcador de posición asociado a la pestaña Perfil . Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido. Puede usarlo con pestañas, píldoras y cualquier otra .navnavegación potenciada.

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 ayudar a satisfacer sus necesidades, esto funciona con <ul>el marcado basado en -, como se muestra arriba, o con cualquier marcado arbitrario "roll your own". Tenga en cuenta que si está usando <nav>, no debe agregarlo role="tablist"directamente, ya que esto anularía la función nativa del elemento como punto de referencia de navegación. En su lugar, cambia a un elemento alternativo (en el ejemplo a continuación, un simple <div>) y envuélvelo <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>

El complemento de pestañas también funciona con pastillas.

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>

Y con pastillas verticales. Idealmente, para las pestañas verticales, también debe agregar aria-orientation="vertical"al contenedor de lista de pestañas.

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>

Accesibilidad

Las interfaces con pestañas dinámicas, como se describe en el patrón de pestañas de la Guía de prácticas de creación de ARIArole="tablist" , requieren atributos adicionales para transmitir su estructura, funcionalidad y estado actual a los usuarios de tecnologías de asistencia (como lectores de pantalla). Como práctica recomendada, recomendamos usar elementos para las pestañas, ya que estos son controles que activan un cambio dinámico, en lugar de enlaces que navegan a una nueva página o ubicación.role="tab"role="tabpanel"aria-<button>

De acuerdo con el patrón de prácticas de creación de ARIA, solo la pestaña actualmente activa recibe el foco del teclado. Cuando se inicializa el complemento de JavaScript, se configurará tabindex="-1"en todos los controles de pestañas inactivos. Una vez que la pestaña actualmente activa tiene el foco, las teclas del cursor activan la pestaña anterior/siguiente, y el complemento cambia el rovingtabindex en consecuencia. Sin embargo, tenga en cuenta que el complemento de JavaScript no distingue entre listas de pestañas horizontales y verticales cuando se trata de interacciones de teclas de cursor: independientemente de la orientación de la lista de pestañas, tanto el cursor hacia arriba como hacia la izquierda van a la pestaña anterior, y el cursor hacia abajo y hacia la derecha van a la siguiente pestaña.

En general, para facilitar la navegación con el teclado, se recomienda hacer que los paneles de pestañas también sean enfocables, a menos que el primer elemento que contiene contenido significativo dentro del panel de pestañas ya sea enfocable. El complemento de JavaScript no trata de manejar este aspecto; cuando corresponda, deberá hacer que sus paneles de pestañas se puedan enfocar explícitamente agregando tabindex="0"su marcado.

El complemento JavaScript de pestañas no es compatible con las interfaces con pestañas que contienen menús desplegables, ya que provocan problemas de usabilidad y accesibilidad. Desde una perspectiva de usabilidad, el hecho de que el elemento activador de la pestaña que se muestra actualmente no sea visible de inmediato (ya que está dentro del menú desplegable cerrado) puede causar confusión. Desde el punto de vista de la accesibilidad, actualmente no existe una forma sensata de asignar este tipo de construcción a un patrón WAI ARIA estándar, lo que significa que no puede hacerse fácilmente comprensible para los usuarios de tecnologías de asistencia.

Uso de atributos de datos

Puede activar una pestaña o una píldora de navegación sin escribir JavaScript simplemente especificando data-bs-toggle="tab"o data-bs-toggle="pill"en un elemento. Utilice estos atributos de datos en .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>

A través de JavaScript

Habilite las pestañas que se pueden tabular a través de JavaScript (cada pestaña 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()
  })
})

Puede activar pestañas individuales de varias maneras:

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 desvanecimiento

Para hacer que las pestañas se desvanezcan, agréguelas .fadea cada .tab-pane. El primer panel de pestañas también debe tener .showpara hacer visible el contenido 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

Transiciones y métodos asíncronos

Todos los métodos de API son asíncronos e inician una transición . Vuelven a la persona que llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará una llamada de método en un componente en transición .

Consulte nuestra documentación de JavaScript para obtener más información .

Activa tu contenido como un elemento de pestaña.

Puede crear una instancia de pestaña con el constructor, por ejemplo:

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

Método	Descripción
`dispose`	Destruye la pestaña de un elemento.
`getInstance`	Método estático que le permite obtener la instancia de pestaña asociada con un elemento DOM, puede usarlo así: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Método estático que devuelve una instancia de pestaña asociada a un elemento DOM o crea una nueva en caso de que no se haya inicializado. Puedes usarlo así: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selecciona la pestaña dada y muestra su panel asociado. Cualquier otra pestaña que se haya seleccionado previamente se deselecciona y su panel asociado se oculta. Vuelve a la persona que llama antes de que se haya mostrado realmente el panel de pestañas (es decir, antes de `shown.bs.tab`que ocurra el evento).

Eventos

Al mostrar una nueva pestaña, los eventos se activan en el siguiente orden:

hide.bs.tab(en la pestaña activa actual)
show.bs.tab(en la pestaña que se mostrará)
hidden.bs.tab(en la pestaña activa anterior, la misma que para el hide.bs.tabevento)
shown.bs.tab(en la pestaña recién activa recién mostrada, la misma que para el show.bs.tabevento)

Si ninguna pestaña ya estaba activa, los eventos hide.bs.taby hidden.bs.tabno se activarán.

Tipo de evento	Descripción
`hide.bs.tab`	Este evento se activa cuando se va a mostrar una nueva pestaña (y, por lo tanto, se va a ocultar la pestaña activa anterior). Use `event.target`y `event.relatedTarget`para apuntar a la pestaña activa actual y la nueva pestaña que pronto estará activa, respectivamente.
`hidden.bs.tab`	Este evento se activa después de que se muestra una nueva pestaña (y, por lo tanto, se oculta la pestaña activa anterior). Use `event.target`y `event.relatedTarget`para apuntar a la pestaña activa anterior y la nueva pestaña activa, respectivamente.
`show.bs.tab`	Este evento se activa al mostrar la pestaña, pero antes de que se muestre la nueva pestaña. Use `event.target`y `event.relatedTarget`para apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
`shown.bs.tab`	Este evento se activa en la presentación de pestañas después de que se haya mostrado una pestaña. Use `event.target`y `event.relatedTarget`para apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) 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
})