Tutorial Bootstrap: Navbars y menús de navegación en Bootstrap

¿Qué es y cuál es la estructura básica de una navbar en Bootstrap?

Una navbar en Bootstrap es un componente de navegación adaptativo que permite crear un encabezado de navegación adaptativo. Este componente es útil para implementar sistemas de menú que se ajustan a diferentes tamaños de pantalla, ofreciendo una visualización óptima tanto en dispositivos móviles como en pantallas de escritorio.

La estructura básica de una nvbar en Bootstrap está compuesta por varios elementos y clases que todos juntos ofrecen flexibilidad y personalización. A continuación se describe la estructura básica:

• Contenedor principal de la nvbar: La navbar se envuelve en un elemento <nav> con la clase .navbar.

<nav class="navbar">...</nav>

• Clase para colapsar y expandir: Para una navbar que sea adaptativa y pueda colapsar en tamaños de pantalla específicos, se utiliza la clase .navbar-expand-{breakpoint} donde {breakpoint} puede ser -sm, -md, -lg, -xl o -xxl.

<nav class="navbar navbar-expand-lg">...</nav>

• Color y tema: Para aplicar un tema claro o oscuro, se utilizan atributos como data-bs-theme="dark" o data-bs-theme="light".

<nav class="navbar" data-bs-theme="dark">...</nav>

• Contenedor fluido: Se recomienda envolver el contenido de la navbar en un <div> con la clase .container-fluid para que se ajuste al ancho completo del contenedor principal.

<div class="container-fluid">...</div>

• Marca de la navbar: Para incluir la marca o logo, se utiliza el elemento <a> con la clase .navbar-brand.

<a class="navbar-brand" href="#">Marca</a>

• Botón para la navegación colapsada: Este botón se crea utilizando el elemento <button> con las clases .navbar-toggler y .navbar-toggler-icon.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

• Contenedor de colapso: El contenido que se colapsa se envuelve en un <div> con las clases .collapse y .navbar-collapse. Además, debe tener un id que coincida con el valor del atributo data-bs-target del botón de navegación.

<div class="collapse navbar-collapse" id="navbarNav">...</div>

• Navegación: Contiene la lista de navegación definida por un <ul> con la clase .navbar-nav. Cada ítem de la lista se define con la clase .nav-item y enlaces dentro de estos ítems con la clase .nav-link.

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Inicio</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Enlace</a>
    </li>
</ul>

Ejemplo completo de una navbar básica:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Enlace</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>

Esta estructura básica permite crear un menú de navegación adaptativo y estilizado utilizando las clases y componentes que ofrece Bootstrap.

Clases básicas de Bootstrap para navbar

Para trabajar de manera eficiente con el componente navbar de Bootstrap, es importante familiarizarse con las clases básicas que proporciona este framework. Estas clases facilitan la personalización y configuración de los elementos de la barra de navegación, permitiendo una mayor flexibilidad y control sobre su apariencia y comportamiento.

.navbar

Clase principal que se aplica al elemento <nav> para definir una barra de navegación.

<nav class="navbar">
  ...
</nav>

.navbar-expand{-sm|-md|-lg|-xl|-xxl}

Determina el punto de quiebre a partir del cual la navbar dejará de colapsar.

<nav class="navbar navbar-expand-lg">
  ...
</nav>

.navbar-bg-*

Aplica diferentes colores de fondo utilizando las clases de utilidad de fondo de Bootstrap.

<nav class="navbar bg-dark">
  ...
</nav>

data-bs-theme="dark" / data-bs-theme="light"

Atributo que se agrega para especificar el modo de color de una navbar.

<nav class="navbar" data-bs-theme="dark">
  ...
</nav>

.container-fluid

Envuelve el contenido dentro de una navbar para que se ajuste al ancho 100% del contenedor principal.

<div class="container-fluid">
  ...
</div>

.navbar-brand

Clase para diseñar el logo o la marca de la compañía dentro del navbar.

<a class="navbar-brand" href="#">Marca</a>

.navbar-toggler y .navbar-toggler-icon

Clases para manejar el botón de colapso de la navbar en dispositivos móviles.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

.collapse y .navbar-collapse

Permiten colapsar contenido dentro de la navbar.

<div class="collapse navbar-collapse" id="navbarNav">
  ...
</div>

.navbar-nav, .nav-item y .nav-link

Clases para definir la estructura y los enlaces del menú de navegación.

<ul class="navbar-nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Inicio</a>
  </li>
</ul>

.navbar-text

Para ajustar la alineación vertical y el espaciado de cadenas de texto dentro del navbar.

<span class="navbar-text">
  Texto con un elemento en línea
</span>

.d-flex, .justify-content-*, .align-items-*

Utilidades de flexbox para ajustar la disposición y alineación de los elementos dentro de la navbar.

<form class="d-flex" role="search">
  <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Buscar</button>
</form>

Estas clases básicas proporcionan una base sólida para construir y personalizar una navbar en Bootstrap, adaptándose a las necesidades específicas del proyecto y garantizando una experiencia de usuario coherente a través de diferentes dispositivos.

Navbar colapsable en Bootstrap

Crear una navbar colapsable en Bootstrap implica implementar varias clases y atributos estándar de Bootstrap que permiten a la barra de navegación adaptarse a diferentes tamaños de pantalla. Dicha funcionalidad es esencial para proporcionar una experiencia de navegación coherente y accesible tanto en dispositivos móviles como en pantallas de escritorio.

Un ejemplo básico de una navbar colapsable puede ser construido utilizando los siguientes componentes:

• Contenedor nav con clases necesarias:
  • .navbar: Clase principal para la navbar.
  • .navbar-expand-{breakpoint}: Para definir el punto de quiebre donde la navbar colapsa.
  • bg-body-tertiary: Clase opcional de cambio de fondo.

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    ...
</nav>

• Botón colapsable (navbar-toggler): Utiliza un botón para activar la funcionalidad colapsable. Este botón debe tener las clases .navbar-toggler y .navbar-toggler-icon. Además, se adjuntan los atributos data-bs-toggle, data-bs-target, aria-controls, aria-expanded y aria-label para controlar la interacción.

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

• Contenedor colapsable: El contenido que se colapsa se envuelve en un <div> con las clases .collapse y .navbar-collapse. El valor del atributo id debe coincidir con data-bs-target del botón.

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    ...
</div>

• Elementos de navegación: Dentro del contenedor colapsable, se incluyen los elementos de navegación utilizando una lista <ul> con las clases .navbar-nav, .nav-item y .nav-link.

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Inicio</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Enlace</a>
    </li>
</ul>

Ejemplo completo de una navbar colapsable:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Enlace</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" 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><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Deshabilitado</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Buscar" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>

Este código ejemplifica una barra de navegación completa y funcional, que incluye enlaces estándares, un menú desplegable y un campo de búsqueda, todos adaptados para colapsar en pantallas pequeñas y expandirse en pantallas grandes.

Navbars con desplegables dropdowns en Bootstrap

Bootstrap facilita la creación de navbars con menús desplegables o dropdowns, lo cual es esencial para estructurar menús de navegación complejos y con múltiples niveles jerárquicos.

Para incluir un dropdown en una navbar, se debe encapsular el contenido del ítem del menú en las clases y estructuras necesarias. A continuación se muestran los pasos para implementar esto.

Primero, estructura básica para una navbar:

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Características</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Precio</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Enlace 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><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Estructura para un dropdown

El ítem de menú que incluye un dropdown debe usar la estructura adecuada para asegurar tanto la funcionalidad como el estilo correctos.

• Clase .dropdown en el ítem del menú:

<li class="nav-item dropdown">

• Enlace del menú con clase .dropdown-toggle y atributos adicionales:

<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Enlace dropdown
</a>

• Lista ul con la clase .dropdown-menu para contener las opciones del dropdown:

<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><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
</ul>

Atributos importantes para accesibilidad

• aria-expanded="false": Indica que el menú no está expandido inicialmente.
• role="button": Define el enlace como un botón, mejorando la accesibilidad.
• data-bs-toggle="dropdown": Activa la funcionalidad de dropdown usando Bootstrap.

Menú dropdown en un navbar oscuro

También es posible aplicar tema oscuro a la navbar incluyendo el atributo data-bs-theme="dark" y cambiando los colores de los items según se necesite.

<nav class="navbar navbar-expand-lg bg-body-tertiary" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Marca</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdownDark" aria-controls="navbarNavDropdownDark" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdownDark">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Características</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Precio</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Enlace 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><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Otra cosa aquí</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Consideraciones adicionales

• Utilities de espaciado y alineación: Utiliza clases de utilidad de Bootstrap como .me-auto, .mb-2, y .mb-lg-0 para ajustar la disposición y el espaciado.
• Dropdowns múltiples: Para menús de navegación más complejos, se pueden incluir múltiples dropdowns siguiendo la misma estructura.

Implementando estas configuraciones, se obtiene una navbar con menús desplegables (dropdowns) en Bootstrap, completamente funcional y adaptable tanto a dispositivos móviles como a pantallas de escritorio.