Navs and tabs

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

En esta página

Base nav

La navegación disponible en Bootstrap comparte marcas y estilos generales, desde la clase base .nav hasta los estados active y disabled. Cambia las 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. Incluyen algunas sobrescrituras de estilo (para trabajar con listas), algo de padding de enlaces para áreas de acceso más grandes y estilo básico para disabled.

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="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Las clases se utilizan en todo momento, por lo que tu marcado puede ser súper flexible. Usa <ul>s como arriba, <ol> si el orden de tus elementos es importante, o lanza el tuyo propio con un elemento <nav>. Debido a que .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="#">Activo</a>
  <a class="nav-link" href="#">Enlace</a>
  <a class="nav-link" href="#">Enlace</a>
  <a class="nav-link disabled">Deshabilitado</a>
</nav>

Tal vez te interese

¿Cuál es el mejor Web Hosting?

Estilos disponibles

Cambia el estilo del componente .nav 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 flexbox utility. De forma predeterminada, los navegadores están alineados a la izquierda, pero puedes cambiarlos fácilmente para que estén alineados al centro o a la derecha.

Centrado con .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Alineado 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="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Vertical

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

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</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="#">Activo</a>
  <a class="nav-link" href="#">Enlace</a>
  <a class="nav-link" href="#">Enlace</a>
  <a class="nav-link disabled">Deshabilitado</a>
</nav>

Tabs

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Pills

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="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Llena y justifica

Fuerza el contenido de tu .nav para extender el ancho completo disponible en una de las dos clases modificadoras. Para llenar proporcionalmente todo el espacio disponible con tus .nav-items, usa .nav-fill. Observa 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="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace de navegación mucho más largo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Al usar una navegación basada en <nav>, puedes omitir con seguridad .nav-item ya que solo se requiere .nav-link para diseñar los elementos <a>.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Activo</a>
  <a class="nav-link" href="#">Enlace de navegación mucho más largo</a>
  <a class="nav-link" href="#">Enlace</a>
  <a class="nav-link disabled">Deshabilitado</a>
</nav>

Para elementos de igual ancho, usa .nav-justified. Todo el espacio horizontal estará ocupado por 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="#">Activo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace de navegación mucho más largo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Similar al ejemplo .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="#">Activo</a>
  <a class="nav-link" href="#">Enlace de navegación mucho más largo</a>
  <a class="nav-link" href="#">Enlace</a>
  <a class="nav-link disabled">Deshabilitado</a>
</nav>

Trabajar con utilidades flex

Si necesitas variaciones de navegación responsive, considera usar una serie de utilidades flexbox. Si bien son más detalladas, estas utilidades ofrecen una mayor personalización en los breakpoints responsive. En el ejemplo a continuación, nuestra navegación se apilará en el breakpoint más bajo, luego se adaptará a un diseño horizontal que llena el ancho disponible a partir del breakpoint pequeño (small).

<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="#">Activo</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Enlace nav más largo</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Enlace</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Deshabilitado</a>
</nav>

En cuanto a la accesibilidad

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

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

Uso de dropdowns

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

Tabs con dropdowns

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Activo</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="#">Acción</a></li>
      <li><a class="dropdown-item" href="#">Otra acción</a></li>
      <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Pills con dropdowns

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Activo</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="#">Acción</a></li>
      <li><a class="dropdown-item" href="#">Otra acción</a></li>
      <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Enlace separado</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Deshabilitado</a>
  </li>
</ul>

Tal vez te interese

¿Cuál es el mejor

Sass

Variables

$nav-link-padding-x: $nav-link-font-size: $nav-link-font-weight: $nav-link-color: $nav-link-hover-color: $nav-link-transition: $nav-link-disabled-color:

$nav-tabs-border-color: $nav-tabs-border-width: $nav-tabs-border-radius: $nav-tabs-link-hover-border-color: $nav-tabs-link-active-color: $nav-tabs-link-active-bg: $nav-tabs-link-active-border-color$nav-pills-border-radius: $nav-pills-link-active-color: $nav-pills-link-active-bg:

Comportamiento de JavaScript

Usa el complemento JavaScript de pestañas, inclúyelo individualmente Web Hosting? class="language-scss" data-lang="scss">$nav-link-padding-y: .5rem; 1rem; null; null; $link-color; $link-hover-color; color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; $gray-600; $gray-300; $border-width; $border-radius; $gray-200 $gray-200 $nav-tabs-border-color; $gray-700; $body-bg; class="o">: $gray-300 $gray-300 $nav-tabs-link-active-bg; $border-radius; $component-active-color; $component-active-bg; o a través del archivo bootstrap.js compilado, para ampliar nuestras pestañas (tabs) y píldoras (pills) de navegación para crear paneles tabulados de contenido local.

Interfaces con pestañas dinámicas, como se describe en las Prácticas de creación WAI ARIA, requieren role="tablist", role="tab", role="tabpanel" y atributos aria- adicionales en orden para transmitir su estructura, funcionalidad y estado actual a los usuarios de tecnologías de asistencia (como los lectores de pantalla). Como práctica recomendada, recomendamos usar elementos <button> 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.

Ten en cuenta que el complemento JavaScript de pestaña no admite interfaces con pestañas que contienen menús desplegables, ya que estos causan 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 se puede hacer fácilmente comprensible para los usuarios de tecnologías de asistencia.

Este es un contenido placeholder asociado a la pestaña Inicio. Al hacer clic en otra pestaña, se cambiará la visibilidad de esta para la siguiente. La pestaña JavaScript 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 un contenido placeholder asociado a la pestaña Perfil. Al hacer clic en otra pestaña, se cambiará la visibilidad de esta para la siguiente. La pestaña JavaScript 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 un contenido placeholder asociado a la pestaña Contacto. Al hacer clic en otra pestaña, se cambiará la visibilidad de esta para la siguiente. La pestaña JavaScript 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">Inicio</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">Perfil</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">Contacto</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 ayudar a satisfacer tus necesidades, esto funciona con el marcado basado en <ul>, como se muestra arriba, o con cualquier marcado arbitrario “Lanza el tuyo propio”. Ten en cuenta que si estás utilizando <nav>, no debes agregar role="tablist" directamente, ya que esto sobrescribiría el rol 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 envuélvelo con <nav>.

<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">Inicio</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">Perfil</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">Contacto</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 complemento de pestañas (tabs) también funciona con pastillas (pills).

<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">Inicio</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">Perfil</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">Contacto</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 pastillas verticales.

Este es un contenido placeholder asociado a la pestaña Mensajes. Al hacer clic en otra pestaña, se cambiará la visibilidad de esta para la siguiente. La pestaña JavaScript 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 un contenido placeholder asociado a la pestaña Configuración. Al hacer clic en otra pestaña, se cambiará la visibilidad de esta para la siguiente. La pestaña JavaScript 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">Inicio</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">Perfil</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">Mensajes</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">Configuración</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 de datos

Puedes activar la navegación por pestañas o píldoras sin escribir JavaScript simplemente especificando data-bs-toggle="tab" o data-bs-toggle="pill" en un elemento. Utiliza estos atributos de datos 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">Inicio</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">Perfil</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">Mensajes</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">Configuración</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 las pestañas que se pueden tabular a través de JavaScript (cada pestaña debe activarse individualmente):

var triggerTabList = Array.prototype.slice.call(document.querySelectorAll('#myTab button'))
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 button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Seleccionar pestaña por nombre

var triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Seleccionar la primera pestaña

Efecto fade

Para hacer que las pestañas aparezcan gradualmente, agrega .fade a cada .tab-pane. El primer panel de pestañas también debe tener .show para que el contenido inicial sea visible.

<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

Transiciones y métodos asíncronos

Todos los métodos de la API son asincrónicos e inician una transition. Regresan al lugar donde se realizó la llamada 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 medio de una transición.

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

constructor

Activa un elemento de pestaña y un contenedor de contenido. La pestaña debe tener un data-bs-target o, si 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">Inicio</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">Perfil</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">Mensajes</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">Configuración</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 button')
  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 se haya seleccionado previamente se deselecciona y su panel asociado se oculta. Regresa a la persona que llama antes de que se muestre realmente el panel de pestañas (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 con un elemento DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Devuelve una instancia de pestaña Bootstrap

getOrCreateInstance

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

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Devuelve una instancia de pestaña Bootstrap

Tal vez te interese

¿Cuál es el mejor Web Hosting?

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 evento hide.bs.tab)
shown.bs.tab (en la pestaña recientemente activa recién mostrada, la misma que para el evento show.bs.tab)

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

Tipo de evento	Descripción
`show.bs.tab`	Este evento se activa al mostrar la pestaña, pero antes de que se muestre la nueva pestaña. Usa `event.target` y `event.relatedTarget` para referenciar 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. Usa `event.target` y `event.relatedTarget` para referenciar la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
`hide.bs.tab`	Este evento se activa cuando se debe mostrar una nueva pestaña (y, por lo tanto, se debe ocultar la pestaña activa anterior). Utiliza `event.target` y `event.relatedTarget` para referenciar 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, la pestaña activa anterior está oculta). Utiliza `event.target` y `event.relatedTarget` para referenciar la pestaña activa anterior y la pestaña activa nueva, respectivamente.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // pestaña recién activada
  event.relatedTarget // pestaña activa anterior
})