Navegación y pestañas

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

On this page

Navegación base

La navegación disponible en Bootstrap comparte marcado y estilos generales, desde la clase base .nav hasta los estados activo y deshabilitado. Intercambia clases modificadoras para cambiar entre cada estilo.

El componente base .nav está construido con Flexbox y proporciona una base sólida para construir todo tipo de componentes de navegación. Incluye algunas sobrescrituras de estilo (para trabajar con listas), algo de padding en los enlaces para áreas de clic más grandes, y estilos básicos para el estado deshabilitado.

El componente base .nav no incluye ningún estado .active. 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, usa el atributo aria-current — usando el valor page para la página actual, o true para el elemento actual en un conjunto.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Las clases se usan en todas partes, por lo que tu marcado puede ser muy flexible. Usa <ul>s como arriba, <ol> si el orden de tus elementos es importante, o crea el tuyo propio con un elemento <nav>. Como el .nav usa display: flex, los enlaces de navegación se comportan igual que los elementos de navegación, pero sin el marcado adicional.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Estilos disponibles

Cambia el estilo del componente .navs con modificadores y utilidades. Mezcla y combina según sea necesario, o construye el tuyo propio.

Alineación horizontal

Cambia la alineación horizontal de tu navegación con utilidades de flexbox. Por defecto, las navegaciones están alineadas a la izquierda, pero puedes cambiarlas fácilmente a alineación centrada o a la derecha.

Centrada con .justify-content-center:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Alineada a la derecha con .justify-content-end:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Vertical

Apila tu navegación cambiando la dirección del elemento flex con la utilidad .flex-column. ¿Necesitas apilarlos en algunos viewports pero no en otros? Usa las versiones responsive (ej., .flex-sm-column).

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Como siempre, la navegación vertical también es posible sin <ul>s.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Pestañas

Toma la navegación base de arriba y añade la clase .nav-tabs para generar una interfaz con pestañas. Úsalas para crear regiones con pestañas con nuestro plugin de JavaScript de pestañas.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Píldoras

Toma ese mismo HTML, pero usa .nav-pills en su lugar:

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Rellenar y justificar

Obliga a que los contenidos de tu .nav se extiendan a todo el ancho disponible con una de dos clases modificadoras. Para rellenar proporcionalmente todo el espacio disponible con tus .nav-items, usa .nav-fill. Ten en cuenta que todo el espacio horizontal está ocupado, pero no todos los elementos de navegación tienen el mismo ancho.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Cuando usas una navegación basada en <nav>, puedes omitir .nav-item de forma segura ya que solo se requiere .nav-link para dar estilo a los elementos <a>.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Para elementos de igual ancho, usa .nav-justified. Todo el espacio horizontal será ocupado por los enlaces de navegación, pero a diferencia del .nav-fill anterior, cada elemento de navegación tendrá el mismo ancho.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Similar al ejemplo de .nav-fill usando una navegación basada en <nav>.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Trabajando con utilidades flex

Si necesitas variaciones de navegación responsive, considera usar una serie de utilidades de flexbox. Aunque son más verbosas, estas utilidades ofrecen mayor personalización a través de breakpoints responsive. En el ejemplo a continuación, nuestra navegación estará apilada en el breakpoint más bajo, luego se adaptará a un diseño horizontal que rellena el ancho disponible a partir del breakpoint pequeño.

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Sobre la accesibilidad

Si estás usando navegaciones para proporcionar una barra de navegación, asegúrate de añadir un role="navigation" al contenedor padre más lógico del <ul>, o envuelve un elemento <nav> alrededor de toda la navegación. No añadas el role al <ul> mismo, ya que esto evitaría que sea anunciado como una lista real por las tecnologías de asistencia.

Ten en cuenta que las barras de navegación, incluso si están visualmente estilizadas como pestañas con la clase .nav-tabs, no deben recibir los atributos role="tablist", role="tab" o role="tabpanel". Estos solo son apropiados para interfaces con pestañas dinámicas, como se describe en las WAI ARIA Authoring Practices. Consulta comportamiento de JavaScript para interfaces con pestañas dinámicas en esta sección para ver un ejemplo. El atributo aria-current no es necesario en interfaces con pestañas dinámicas ya que nuestro JavaScript maneja el estado seleccionado añadiendo aria-selected="true" en la pestaña activa.

Uso de desplegables

Añade menús desplegables con un poco de HTML adicional y el plugin de JavaScript de desplegables.

Pestañas con desplegables

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Píldoras con desplegables

<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

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:                    $link-color;
$nav-link-hover-color:              $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

Usa el plugin de JavaScript de pestañas—inclúyelo individualmente o a través del archivo compilado bootstrap.js—para extender nuestras pestañas y píldoras de navegación y crear paneles con pestañas de contenido local.

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

Ten en cuenta que las interfaces con pestañas dinámicas no deben contener menús desplegables, ya que esto causa tanto problemas de usabilidad como de accesibilidad. Desde la perspectiva de usabilidad, el hecho de que el elemento activador de la pestaña mostrada actualmente no sea inmediatamente visible (ya que está dentro del menú desplegable cerrado) puede causar confusión. Desde el punto de vista de la accesibilidad, actualmente no hay una forma sensata de mapear este tipo de construcción a un patrón estándar de WAI ARIA, lo que significa que no se puede hacer fácilmente comprensible para los usuarios de tecnologías de asistencia.

Este es algún contenido de marcador de posición para el contenido asociado a la pestaña Home. Al hacer clic en otra pestaña se alternará la visibilidad de esta para la siguiente. El JavaScript de pestañas intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, píldoras y cualquier otra navegación basada en .nav.

Este es algún contenido de marcador de posición para el contenido asociado a la pestaña Profile. Al hacer clic en otra pestaña se alternará la visibilidad de esta para la siguiente. El JavaScript de pestañas intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, píldoras y cualquier otra navegación basada en .nav.

Este es algún contenido de marcador de posición para el contenido asociado a la pestaña Contact. Al hacer clic en otra pestaña se alternará la visibilidad de esta para la siguiente. El JavaScript de pestañas intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, píldoras y cualquier otra navegación basada en .nav.

<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="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Para adaptarse a tus necesidades, esto funciona con marcado basado en <ul>, como se muestra arriba, o con cualquier marcado propio arbitrario. Ten en cuenta que si estás usando <nav>, no debes añadir role="tablist" directamente a él, ya que esto sobrescribiría el role nativo 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 envuelve el <nav> alrededor de él.

<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>
  </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">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

El plugin de pestañas también funciona con píldoras.

<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>
</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">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Y con píldoras verticales.

Este es algún contenido de marcador de posición para el contenido asociado a la pestaña Messages. Al hacer clic en otra pestaña se alternará la visibilidad de esta para la siguiente. El JavaScript de pestañas intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, píldoras y cualquier otra navegación basada en .nav.

Este es algún contenido de marcador de posición para el contenido asociado a la pestaña Settings. Al hacer clic en otra pestaña se alternará la visibilidad de esta para la siguiente. El JavaScript de pestañas intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, píldoras y cualquier otra navegación basada en .nav.

<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-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">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

Uso de atributos data

Puedes activar una navegación de pestañas o píldoras sin escribir ningún JavaScript simplemente especificando data-bs-toggle="tab" o data-bs-toggle="pill" en un elemento. Usa estos atributos data en .nav-tabs o .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">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

A través de JavaScript

Habilita pestañas navegables vía JavaScript (cada pestaña necesita activarse individualmente):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Puedes activar pestañas individuales de varias maneras:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

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

Efecto de desvanecimiento

Para hacer que las pestañas aparezcan con un efecto de fundido, añade .fade a cada .tab-pane. El primer panel de pestaña también debe tener .show para hacer visible el contenido inicial.

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

Métodos

Métodos asíncronos y transiciones

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

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

constructor

Activa un elemento de pestaña y contenedor de contenido. La pestaña debe tener un data-bs-target o, si se usa un enlace, un atributo href, apuntando a un nodo contenedor en el DOM.

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

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

Selecciona la pestaña dada y muestra su panel asociado. Cualquier otra pestaña que hubiera sido seleccionada previamente queda deseleccionada y su panel asociado se oculta. Vuelve al llamador antes de que el panel de pestaña se haya mostrado realmente (es decir, antes de que ocurra el evento shown.bs.tab).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

dispose

Destruye la pestaña de un elemento.

getInstance

Método estático que te permite obtener la instancia de pestaña asociada a un elemento del DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Método estático que te permite obtener la instancia de pestaña asociada a un elemento del DOM, o crear una nueva en caso de que no haya sido inicializada

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Eventos

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

hide.bs.tab (en la pestaña activa actual)
show.bs.tab (en la pestaña que se va a mostrar)
hidden.bs.tab (en la pestaña activa anterior, la misma que para el evento hide.bs.tab)
shown.bs.tab (en la pestaña recién activada que se acaba de mostrar, la misma que para el evento show.bs.tab)

Si ninguna pestaña estaba ya activa, entonces los eventos hide.bs.tab y hidden.bs.tab no se dispararán.

Tipo de evento	Descripción
`show.bs.tab`	Este evento se dispara al mostrar la pestaña, pero antes de que la nueva pestaña se haya mostrado. Usa `event.target` y `event.relatedTarget` para apuntar a la pestaña activa y a la pestaña activa anterior (si está disponible) respectivamente.
`shown.bs.tab`	Este evento se dispara al mostrar la pestaña después de que una pestaña se haya mostrado. Usa `event.target` y `event.relatedTarget` para apuntar a la pestaña activa y a la pestaña activa anterior (si está disponible) respectivamente.
`hide.bs.tab`	Este evento se dispara cuando se va a mostrar una pestaña nueva (y por tanto la pestaña activa anterior se va a ocultar). Usa `event.target` y `event.relatedTarget` para apuntar a la pestaña activa actual y a la nueva pestaña que pronto estará activa, respectivamente.
`hidden.bs.tab`	Este evento se dispara después de que se muestra una pestaña nueva (y por tanto la pestaña activa anterior queda oculta). Usa `event.target` y `event.relatedTarget` para apuntar a la pestaña activa anterior y a la nueva pestaña activa, respectivamente.

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