Navs y tabs

<< Formularios Navbar >>

Los navs se utilizan para navegar a lo largo de nuestra web. Para conseguirlo con Bootstrap debemos utilizar al menos la clase .nav que nos va a permitir activar y desactivar los estados.

El componente básico utiliza la clase .nav como se ha mencionado, este no incluye el estado .active si nosotros no lo ponemos por defecto.

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

¿Qué necesitamos para hacer un nav funcional?

Para que funcionen y al pulsar sobre un elemento del nav me visualice el contenido correspondiente, se debe separar el código en dos bloques HTML distintos pero conectados por IDs.

  • El Controlador (La lista de botones): La clase base (nav), cómo queremos mostrarlo: nav-tabs (si queremos que sean como carpetas) o nav-pills(si queremos que sean como botones) además del role="tablist" (importante para accesibilidad)
  • El contenedor de "pantallas" (tab-content): Es la caja donde van a estar los textos/imágenes que vamos a mostrar/ocultar.
  • Las "pantallas" individuales (tab-panel), donde cada sección de contenido tendrá una clase base (tab-pane) que por defecto están ocultas y sólo se mostrará la que esté con la clase active

Para no usar JavaScript escrito por ti, dependes al 100% de estos atributos en los botones:

  • data-bs-toggle="tab" (o "pill"): Le dice al botón: "Oye, compórtate como una pestaña, no como un enlace normal".
  • data-bs-target="#ID_DEL_CONTENIDO": Es el cable. Conecta el botón con el
    exacto que debe mostrar.
  • aria-selected="true/false": Indica cuál está presionado.
<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>

Podéis encontrar muchos más ejemplos aquí

<< Formularios Navbar >>