Navegación y pestañas
Documentación y ejemplos de cómo usar los componentes de navegación incluidos en Bootstrap.
Nav 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" 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" 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 nav con utilidades de flexbox. Por defecto, los navs están alineados a la izquierda, pero puedes cambiarlos 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" 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" 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" 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" 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" aria-disabled="true">Disabled</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="#">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" aria-disabled="true">Disabled</a>
</li>
</ul>Subrayado
Toma ese mismo HTML, pero usa .nav-underline en su lugar:
<ul class="nav nav-underline">
<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" aria-disabled="true">Disabled</a>
</li>
</ul>Rellenar y justificar
Obliga a los contenidos de tu .nav a extenderse 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 del nav 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" 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" 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" 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" 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" aria-disabled="true">Disabled</a>
</nav>Sobre 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 el ARIA Authoring Practices Guide tabs pattern.
Consulta el 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.
Usando dropdowns
Añade menús desplegables con un poco de HTML adicional y el plugin de JavaScript de desplegables.
Pestañas con dropdowns
<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" aria-disabled="true">Disabled</a>
</li>
</ul>Pills con dropdowns
<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" aria-disabled="true">Disabled</a>
</li>
</ul>CSS
Variables
Añadido en v5.2.0Como parte del enfoque evolutivo de variables CSS de Bootstrap, los navs ahora usan
variables CSS locales en .nav, .nav-tabs, y .nav-pills para una
personalización en tiempo real mejorada. Los valores de las variables CSS se establecen mediante Sass, por lo
que la personalización con Sass también sigue siendo compatible.
En la clase base .nav:
--#{$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:
--#{$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:
--#{$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};
En la clase modificadora .nav-underline:
--#{$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 Sass
$nav-link-padding-y: .5rem;
$nav-link-padding-x: 1rem;
$nav-link-font-size: null;
$nav-link-font-weight: null;
$nav-link-color: var(--#{$prefix}link-color);
$nav-link-hover-color: var(--#{$prefix}link-hover-color);
$nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color: 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
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.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la visibilidad y el
estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación basada en
.nav.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la visibilidad y el
estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación basada en
.nav.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la visibilidad y el
estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación basada en
.nav.
Este es un contenido de marcador de posición del contenido asociado a la pestaña Disabled.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>
Para 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>
<button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>
El plugin de pestañas también funciona con píldoras.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la visibilidad y el
estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación basada en
.nav.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la visibilidad y el
estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación basada en
.nav.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la visibilidad y el
estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación basada en
.nav.
Este es un contenido de marcador de posición del contenido asociado a la pestaña Disabled.
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>
Y con píldoras verticales. Idealmente, para pestañas verticales, también deberías añadir
aria-orientation="vertical" al contenedor de la lista de pestañas.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la visibilidad y
el estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación basada en
.nav.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la visibilidad y
el estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación basada en
.nav.
Este es un contenido de marcador de posición del contenido asociado a la pestaña Disabled.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la
visibilidad y el estilo del contenido. Puedes usarlo con pestañas, pills y cualquier otra navegación
basada en .nav.
Este es un contenido de marcador de posición del 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 las pestañas intercambia clases para controlar la
visibilidad y el estilo del contenido. Puedes usarlo con pestañas, 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">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
</div>
</div>
Accesibilidad
Las interfaces con pestañas dinámicas, como se describe en el ARIA Authoring Practices Guide tabs pattern,
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 desencadenan 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 ARIA Authoring Practices, 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ñas inactivos. Una vez que la pestaña actualmente
activa tiene el foco, las teclas del cursor activan la pestaña anterior/siguiente. Las teclas Home
y End activan la primera y la ú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 con las teclas del cursor: independientemente de la
orientación de la lista de pestañas, tanto el cursor arriba como el izquierdo van a la pestaña
anterior, y el cursor abajo y el derecho van a la pestaña siguiente.
En general, para facilitar la navegación con teclado, se recomienda hacer que los paneles
de pestañas también sean enfocables, a menos que el primer elemento que contenga contenido significativo
dentro del panel de pestañas ya sea enfocable. El plugin de JavaScript no intenta manejar este aspecto:
cuando sea apropiado, tendrás que hacer que tus paneles de pestañas sean explícitamente enfocables añadiendo
tabindex="0" en tu marcado.
El plugin de JavaScript de pestañas no admite interfaces con pestañas que contienen menús dropdown, ya que causan problemas tanto de usabilidad como de accesibilidad. Desde el punto de vista de usabilidad, el hecho de que el elemento disparador de la pestaña mostrada actualmente no sea inmediatamente visible (ya que está dentro del menú dropdown cerrado) puede causar confusión. Desde el punto de vista de accesibilidad, actualmente no hay una forma sensata de mapear este tipo de construcción a un patrón WAI ARIA estándar, lo que significa que no puede hacerse fácilmente comprensible para los usuarios de tecnologías de asistencia.
Usando 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" tabindex="0">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>
Vía JavaScript
Habilita pestañas navegables vía JavaScript (cada pestaña necesita 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() // Select tab by name
const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Efecto de fundido
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" 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. Vuelven al llamador tan pronto como la transición comienza, pero antes de que termine. Además, una llamada a un método en un componente en transición será ignorada. Obtén más información en nuestra documentación de JavaScript.
Activa tu contenido como un elemento tab.
Puedes crear una instancia de tab 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 tab asociada a un elemento
DOM, puedes usarlo así: bootstrap.Tab.getInstance(element). |
getOrCreateInstance |
Método estático que devuelve una instancia de tab asociada a un elemento DOM o
crea una nueva en caso de que no haya sido inicializada. Puedes usarlo así:
bootstrap.Tab.getOrCreateInstance(element). |
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). |
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 eventohide.bs.tab)shown.bs.tab(en la pestaña recién activada que se acaba de mostrar, la misma que para el eventoshow.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 |
|---|---|
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. |
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. |
const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
event.target // newly activated tab
event.relatedTarget // previous active tab
})