¿Cómo crear una barra de navegación responsiva con Bootstrap?

Una barra de navegación responsiva con Bootstrap se construye usando el componente navbar, que adapta automáticamente el menú para celulares y computadoras.

¿Sabías que tienes menos de tres segundos para que un visitante decida si se queda en tu sitio? La barra de navegación es lo primero que ven. Si está rota en el celular, se van.

La historia de Rodrigo y su tienda en línea

Rodrigo vende productos de limpieza en Monterrey. Armó su sitio web con mucho esfuerzo. Tenía buenas fotos, precios claros y hasta carrito de compras.

Pero su menú se veía horrible en el celular. Los botones se salían de la pantalla. Sus clientes no encontraban la sección de ofertas.

Un día descubrió el componente navbar de Bootstrap. En una tarde, su menú se veía perfecto en cualquier dispositivo. Sus ventas subieron porque la gente podía navegar sin frustrarse.

Las piezas de una navbar en Bootstrap

Antes de escribir código, necesitas conocer las partes principales. Una navbar de Bootstrap tiene tres ingredientes clave.

Primero, la etiqueta <nav> con las clases base. Segundo, el logo o nombre de tu sitio. Tercero, los enlaces del menú.

Así se ve la estructura básica:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">

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

    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse"
      data-bs-target="#menuPrincipal">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menuPrincipal">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Productos</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Ofertas</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

Copia este código y pégalo en tu proyecto. Ábrelo en el celular y en la computadora. Verás la magia al momento.

¿Qué hace cada clase?

No basta con copiar y pegar. Necesitas entender qué hace cada clase para poder modificarla.

navbar — Es la clase base. Sin ella, nada funciona.

navbar-expand-lg — Le dice a Bootstrap: "muestra el menú completo en pantallas grandes (lg). En pantallas pequeñas, conviértelo en un botón de hamburguesa."

navbar-light — Define el color del texto de los enlaces. Usa esta versión con fondos claros.

bg-light — Pone un fondo gris claro. Puedes cambiarlo por bg-dark, bg-primary, bg-white o cualquier color de Bootstrap.

navbar-brand — Es el logo o el nombre de tu sitio. Siempre va a la izquierda.

navbar-toggler — Es el botón de tres líneas (hamburguesa) que aparece en celulares.

ms-auto — Empuja los enlaces hacia la derecha. Es margin-start automático. Muy útil para alinear.

La historia de Fernanda y el menú oscuro

Fernanda diseña páginas para restaurantes en la Ciudad de México. Su cliente más reciente quería un menú de navegación elegante, con fondo negro y letras blancas.

Ella probó poner bg-dark pero los enlaces no se veían. Eran oscuros sobre oscuro.

El problema era que seguía usando navbar-light. Cambió esa clase por navbar-dark y todo se resolvió. Así quedó su código:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Restaurante La Paloma</a>
    ...
  </div>
</nav>

Regla fácil de recordar: fondo claro usa navbar-light, fondo oscuro usa navbar-dark. Siempre van en par.

El botón hamburguesa: cómo funciona

En pantallas pequeñas, Bootstrap oculta los enlaces y muestra un botón con tres líneas. Ese botón se llama "hamburguesa".

Cuando el usuario lo toca, el menú se despliega hacia abajo. Esto funciona gracias al atributo data-bs-target que conecta el botón con el div del menú.

Observa estos dos fragmentos. Tienen que compartir el mismo ID:

<!-- El botón hamburguesa apunta a #menuPrincipal -->
<button class="navbar-toggler" type="button"
  data-bs-toggle="collapse"
  data-bs-target="#menuPrincipal">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- El menú tiene el ID menuPrincipal -->
<div class="collapse navbar-collapse" id="menuPrincipal">
  ...
</div>

Si cambias el ID en uno, cámbialo en el otro. Si no coinciden, el botón no abre nada. Ese es el error más común entre principiantes.

Agregar un botón de acción en la navbar

Muchos sitios en México ponen un botón destacado en la barra de navegación. Por ejemplo, "Comprar ahora" o "Cotizar".

Esto es muy fácil con Bootstrap. Agrega un botón dentro del navbar-collapse, junto a los enlaces:

<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  <li class="nav-item">
    <a class="nav-link" href="#">Inicio</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Productos</a>
  </li>
</ul>

<a href="#" class="btn btn-primary ms-3">Cotizar gratis</a>

Fíjate en el ms-3. Eso agrega un pequeño espacio entre los enlaces y el botón. Sin ese espacio, el botón queda pegado al último enlace y se ve mal.

Errores comunes que debes evitar

Aquí es donde la mayoría de los principiantes se traba. Revisa esta lista con cuidado.

Error 1 — Olvidar el JavaScript de Bootstrap. El botón hamburguesa no funciona solo con CSS. Necesita el archivo JS de Bootstrap. Verifica que tienes esta línea antes de cerrar el </body>:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Sin este script, el menú se queda cerrado para siempre en móvil.

Error 2 — IDs que no coinciden. Ya lo mencionamos, pero vale repetirlo. El data-bs-target del botón y el id del div deben ser idénticos. Una letra diferente y el menú no abre.

Error 3 — Usar navbar-light con fondo oscuro. Los enlaces se vuelven invisibles. Recuerda: navbar-dark va con fondos oscuros, navbar-light va con fondos claros.

Error 4 — No usar container adentro. Sin <div class="container">, el contenido se pega a los bordes de la pantalla. Siempre pon un container dentro de la navbar para centrar el contenido.

Error 5 — Poner el navbar-brand fuera del container. Si el logo queda fuera del contenedor, se desalinea con el resto del contenido de la página. Todo debe ir dentro del mismo container.

La historia de Don Marco y su ferretería en Puebla

Don Marco tiene una ferretería familiar en Puebla. Su sobrino le armó una página web, pero la barra de navegación se veía diferente en cada celular.

El problema era que no usaban container. El menú se expandía hasta los bordes y en pantallas grandes se veía muy estirado.

Agregaron <div class="container"> dentro del <nav> y al instante el menú quedó centrado y con márgenes elegantes. Don Marco quedó tan contento que le encargó al sobrino tres páginas más para sus sucursales.

A veces el arreglo más poderoso es el más sencillo.

Lo que llevas de esta lección

• La navbar de Bootstrap necesita siempre las clases navbar y navbar-expand-{tamaño} como base.
• Usa navbar-dark con fondos oscuros y navbar-light con fondos claros. Nunca los mezcles al revés.
• El botón hamburguesa funciona solo si el data-bs-target y el id del menú son exactamente iguales.
• Siempre incluye <div class="container"> dentro del <nav> para centrar el contenido con márgenes limpios.
• Sin el archivo JavaScript de Bootstrap, el menú colapsable no funciona en celulares. Verifica que lo tienes cargado.