Navegaciones y pestañas

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

En esta página

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 anulaciones de estilo (para trabajar con listas), algo de relleno de enlace (link padding) para áreas de clic más grandes y un estilo básico 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, utiliza el atributo aria-current, usando el valor page para la página actual, o true para el elemento actual en un conjunto.

html

<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" aria-disabled="true">Deshabilitado</a>
  </li>
</ul>

Las clases se utilizan en todo momento, por lo que tu marcado puede ser muy flexible. Utiliza elementos <ul> como los anteriores, <ol> si el orden de tus elementos es importante, o crea 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.

html

<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" aria-disabled="true">Deshabilitado</a>
</nav>

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 las utilidades flexbox. De forma predeterminada, las navegaciones están alineadas a la izquierda, pero puedes cambiarlas fácilmente para que estén centradas o alineadas 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="#">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" aria-disabled="true">Deshabilitado</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="#">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" aria-disabled="true">Deshabilitado</a>
  </li>
</ul>

Vertical

Apila tu navegación cambiando la dirección del elemento flex con la utilidad .flex-column. ¿Necesitas apilarlos en algunas ventanas gráficas (viewports) pero no en otras? Utiliza las versiones responsivas (por ejemplo, .flex-sm-column).

html

<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" aria-disabled="true">Deshabilitado</a>
  </li>
</ul>

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

html

<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" aria-disabled="true">Deshabilitado</a>
</nav>

Pestañas

Toma la navegación básica de arriba y agrega la clase .nav-tabs para generar una interfaz de pestañas. Utilízalas para crear regiones interactivas con nuestro plugin de JavaScript de pestañas.

html

<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" aria-disabled="true">Deshabilitado</a>
  </li>
</ul>

Pastillas

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

html

<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" aria-disabled="true">Deshabilitado</a>
  </li>
</ul>

Subrayado

Toma el mismo HTML, pero usa .nav-underline en su lugar:

html

<ul class="nav nav-underline">
  <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" aria-disabled="true">Deshabilitado</a>
  </li>
</ul>

Rellenar y justificar

Fuerza 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 elementos .nav-item, utiliza .nav-fill. Ten en cuenta 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="#">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" aria-disabled="true">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 dar estilo a los elementos <a>.

html

<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" aria-disabled="true">Deshabilitado</a>
</nav>

Para elementos de igual ancho, usa .nav-justified. Todo el espacio horizontal estará ocupado por los enlaces de navegación, pero a diferencia de .nav-fill anterior, 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="#">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" aria-disabled="true">Deshabilitado</a>
  </li>
</ul>

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

html

<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" aria-disabled="true">Deshabilitado</a>
</nav>

Trabajar con utilidades flex

Si necesitas variaciones de navegación responsivas, considera usar una serie de utilidades flexbox. Aunque son más detalladas, estas utilidades ofrecen una mayor personalización en los puntos de interrupción responsivos. In 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 (sm).

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="#">Activo</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Enlace de navegación 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" aria-disabled="true">Deshabilitado</a>
</nav>

Con respecto a la accesibilidad

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

Ten en cuenta que las barras de navegación, incluso si están estilizadas visualmente 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 de pestañas dinámicas, como se describe en el patrón de pestañas de la Guía de prácticas de autoría de ARIA. Consulta el comportamiento de JavaScript para interfaces dinámicas de pestañas en esta sección para ver un ejemplo. El atributo aria-current no es necesario en las interfaces de pestañas dinámicas ya que nuestro JavaScript maneja el estado seleccionado agregando aria-selected="true" en la pestaña activa.

Uso de menús desplegables

Agrega menús desplegables con un poco de HTML adicional y el plugin de 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="#">Activo</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Desplegable</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" aria-disabled="true">Deshabilitado</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="#">Activo</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Desplegable</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" aria-disabled="true">Deshabilitado</a>
  </li>
</ul>

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS de Bootstrap, las navegaciones ahora usan variables CSS locales en .nav, .nav-tabs y .nav-pills para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

En la clase base .nav:

scss/_nav.scss

--#{$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 clase modificadora .nav-tabs:

scss/_nav.scss

--#{$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 clase modificadora .nav-pills:

scss/_nav.scss

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

Agregado en v5.3.0

En la clase modificadora .nav-underline:

scss/_nav.scss

--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};

Variables de Sass

scss/_variables.scss

$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:           var(--#{$prefix}secondary-color);
$nav-link-focus-box-shadow:         $focus-ring-box-shadow;

$nav-tabs-border-color:             var(--#{$prefix}border-color);
$nav-tabs-border-width:             var(--#{$prefix}border-width);
$nav-tabs-border-radius:            var(--#{$prefix}border-radius);
$nav-tabs-link-hover-border-color:  var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color;
$nav-tabs-link-active-color:        var(--#{$prefix}emphasis-color);
$nav-tabs-link-active-bg:           var(--#{$prefix}body-bg);
$nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg;

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

$nav-underline-gap:                 1rem;
$nav-underline-border-width:        .125rem;
$nav-underline-link-active-color:   var(--#{$prefix}emphasis-color);

Comportamiento de JavaScript

Utiliza el plugin de JavaScript de pestañas (tab)—inclúyelo individualmente o a través del archivo compilado bootstrap.js—para extender nuestras pestañas y pastillas de navegación para crear paneles interactivos (tabbable panes) de contenido local.

Este es un contenido de marcador de posición para el contenido asociado de la pestaña Inicio. Al hacer clic en otra pestaña se alternará la visibilidad de esta por la siguiente. El JavaScript de la pestaña intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, pastillas (pills) y cualquier otra navegación basada en .nav.

Este es un contenido de marcador de posición para el contenido asociado de la pestaña Perfil. Al hacer clic en otra pestaña se alternará la visibilidad de esta por la siguiente. El JavaScript de la pestaña intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, pastillas (pills) y cualquier otra navegación basada en .nav.

Este es un contenido de marcador de posición para el contenido asociado de la pestaña Contacto. Al hacer clic en otra pestaña se alternará la visibilidad de esta por la siguiente. El JavaScript de la pestaña intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, pastillas (pills) y cualquier otra navegación basada en .nav.

Este es un contenido de marcador de posición para el contenido asociado de la pestaña deshabilitada.

<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">Inicio</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">Perfil</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">Contacto</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>Deshabilitado</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 tus necesidades, esto funciona con marcado basado en <ul>, como se muestra arriba, o con cualquier marcado arbitrario creado por ti mismo. Ten en cuenta que si usas <nav>, no debes agregar role="tablist" directamente a él, ya que esto anularía el rol nativo del elemento como una región de navegación. En su lugar, cambia a un elemento alternativo (en el ejemplo a continuación, un <div> simple) y envuelve el <nav> a su alrededor.

Este es un contenido de marcador de posición para el contenido asociado de la pestaña deshabilitada.

<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>
    <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>Deshabilitado</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 plugin de pestañas también funciona con pastillas (pills).

Este es un contenido de marcador de posición para el contenido asociado de la pestaña deshabilitada.

<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>
  <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>Deshabilitado</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 pestañas verticales, también debes agregar aria-orientation="vertical" al contenedor de la lista de pestañas.

Este es un contenido de marcador de posición para el contenido asociado de la pestaña deshabilitada.

Este es un contenido de marcador de posición para el contenido asociado de la pestaña Mensajes. Al hacer clic en otra pestaña se alternará la visibilidad de esta por la siguiente. El JavaScript de la pestaña intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, pastillas (pills) y cualquier otra navegación basada en .nav.

Este es un contenido de marcador de posición para el contenido asociado de la pestaña Configuración. Al hacer clic en otra pestaña se alternará la visibilidad de esta por la siguiente. El JavaScript de la pestaña intercambia clases para controlar la visibilidad y el estilo del contenido. Puedes usarlo con pestañas, pastillas (pills) 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-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>Deshabilitado</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" 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 de pestañas dinámicas, como se describe en el patrón de pestañas de la Guía de prácticas de autoría de ARIA, requieren atributos 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 mejor 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.

De acuerdo con el patrón de prácticas de autoría de ARIA, solo la pestaña actualmente activa recibe el foco del teclado. Cuando se inicializa el plugin de JavaScript, establecerá tabindex="-1" en todos los controles de pestaña inactivos. Una vez que la pestaña actualmente activa tiene el foco, las teclas de flecha activan la pestaña anterior/siguiente. Las teclas Inicio y Fin activan la primera y última pestaña, respectivamente. El plugin cambiará el roving tabindex en consecuencia. Sin embargo, ten en cuenta que el plugin de JavaScript no distingue entre listas de pestañas horizontales y verticales cuando se trata de interacciones de teclas de flecha: independientemente de la orientación de la lista de pestañas, tanto la flecha hacia arriba como hacia la izquierda van a la pestaña anterior, y la flecha hacia abajo y hacia la derecha van a la pestaña siguiente.

En general, para facilitar la navegación con el teclado, se recomienda que los propios paneles de pestañas también se puedan enfocar, a menos que el primer elemento que contenga contenido significativo dentro del panel de pestañas ya se pueda enfocar. El plugin de JavaScript no intenta manejar este aspecto; cuando corresponda, deberás hacer que tus paneles de pestañas sean explícitamente enfocables agregando tabindex="0" en tu marcado.

El plugin de JavaScript de pestañas no admite interfaces de pestañas que contengan menús desplegables, ya que esto causa problemas tanto de usabilidad como de 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 mapear este tipo de estructura 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.

Uso de atributos de datos

Puedes activar una navegación de pestañas o pastillas sin escribir nada de 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" 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

Habilita las pestañas interactivas 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()
  })
})

Puedes activar pestañas individuales de varias maneras:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Seleccionar pestaña por nombre

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

Efecto de desvanecimiento (fade)

Para hacer que las pestañas se desvanezcan al aparecer, agrega .fade a cada .tab-pane. El primer panel de pestañas 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" 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

Todos los métodos de la API son asíncronos e inician una transición. Devuelven el control al llamador tan pronto como se inicia la transición, pero antes de que termine. Además, se ignorará cualquier llamada a un método en un componente en transición. Más información en nuestra documentación de JavaScript.

Activa tu contenido como un elemento de pestaña.

Puedes 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 te permite obtener la instancia de pestaña asociada con un elemento DOM, puedes usarlo de esta manera: `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 haya sido inicializada. Puedes usarlo de esta manera: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selecciona la pestaña dada y muestra su panel asociado. Cualquier otra pestaña que haya sido seleccionada previamente se deselecciona y su panel asociado se oculta. Devuelve el control al llamador antes de que el panel de la pestaña se haya mostrado realmente (es decir, antes de que ocurra el evento `shown.bs.tab`).

Eventos

Al mostrar una nueva pestaña, 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 activa que se acaba de mostrar, la misma que para el evento show.bs.tab)

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

Tipo de evento	Descripción
`hide.bs.tab`	Este evento se dispara cuando se va a mostrar una nueva pestaña (y, por lo tanto, la pestaña activa anterior se va a ocultar). Utiliza `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 nueva pestaña (y, por lo tanto, la pestaña activa anterior se oculta). Utiliza `event.target` y `event.relatedTarget` para apuntar a la pestaña activa anterior y a la nueva pestaña activa, respectivamente.
`show.bs.tab`	Este evento se dispara al mostrar la pestaña, pero antes de que se haya mostrado la nueva pestaña. Utiliza `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 se haya mostrado la pestaña. Utiliza `event.target` y `event.relatedTarget` para apuntar a la pestaña activa y a 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 // pestaña recién activada
  event.relatedTarget // pestaña activa anterior
})

Navegaciones y pestañas

¿Te gustó esta traducción?

Navegación base

Estilos disponibles

Alineación horizontal

Vertical

Pestañas

Pastillas

Subrayado

Rellenar y justificar

Trabajar con utilidades flex

Con respecto a la accesibilidad

Uso de menús desplegables

Pestañas con menús desplegables

Pastillas con menús desplegables

CSS

Variables

Variables de Sass

Comportamiento de JavaScript

Accesibilidad

Uso de atributos de datos

A través de JavaScript

Efecto de desvanecimiento (fade)

Métodos

Eventos