Tabla de contenido

La barra de navegación es uno de los elementos más usados en cualquier sitio web y uno de los más complicados de hacer desde cero. Bootstrap 5 la resuelve de forma elegante y responsiva con el componente navbar.

Estructura básica de la Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <!-- Logo / Marca -->
    <a class="navbar-brand" href="/">MiSitio</a>

    <!-- Botón hamburguesa para móvil -->
    <button 
      class="navbar-toggler" 
      type="button" 
      data-bs-toggle="collapse" 
      data-bs-target="#navMenu"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Menú colapsable -->
    <div class="collapse navbar-collapse" id="navMenu">
      <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="/blog">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contacto">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Clases importantes:

  • navbar-expand-lg: en pantallas lg (≥992px) el menú se muestra horizontal. En menores, se colapsa con el botón hamburguesa.
  • navbar-dark: color de texto claro (para fondos oscuros).
  • navbar-light: color de texto oscuro (para fondos claros).
  • ms-auto en el ul: empuja el menú hacia la derecha.

El botón hamburguesa

El botón hamburguesa aparece automáticamente en móviles gracias a navbar-expand-{breakpoint}. Los atributos data-bs-toggle="collapse" y data-bs-target="#navMenu" conectan el botón con el menú. El ID en el botón y en el div.collapse debe coincidir.

<button 
  class="navbar-toggler" 
  type="button" 
  data-bs-toggle="collapse" 
  data-bs-target="#navMenu"
  aria-controls="navMenu"
  aria-expanded="false"
  aria-label="Abrir menú"
>
  <span class="navbar-toggler-icon"></span>
</button>

Añadir logo a la Navbar

<a class="navbar-brand d-flex align-items-center gap-2" href="/">
  <img src="/assets/logo.webp" alt="Logo 8devmx" height="36">
  <span>8devmx</span>
</a>

Para crear un submenú dentro de la navbar:

<li class="nav-item dropdown">
  <a 
    class="nav-link dropdown-toggle" 
    href="#" 
    data-bs-toggle="dropdown"
  >
    Categorías
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="/categoria/javascript">JavaScript</a></li>
    <li><a class="dropdown-item" href="/categoria/php">PHP</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="/blog">Ver todas</a></li>
  </ul>
</li>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="/">8devmx</a>

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

    <div class="collapse navbar-collapse" id="navFull">
      <!-- Links a la izquierda -->
      <ul class="navbar-nav me-auto">
        <li class="nav-item"><a class="nav-link" href="/blog">Blog</a></li>
        <li class="nav-item"><a class="nav-link" href="/cursos">Cursos</a></li>
      </ul>

      <!-- Búsqueda a la derecha -->
      <form class="d-flex gap-2">
        <input class="form-control" type="search" placeholder="Buscar...">
        <button class="btn btn-outline-light" type="submit">Buscar</button>
      </form>
    </div>
  </div>
</nav>

Para que la navbar se quede fija al hacer scroll, añade fixed-top o sticky-top:

<!-- Fija en la parte superior siempre -->
<nav class="navbar navbar-dark bg-dark fixed-top">
  ...
</nav>

<!-- Se queda fija solo cuando llegas a su posición -->
<nav class="navbar navbar-dark bg-dark sticky-top">
  ...
</nav>

Con fixed-top debes agregar padding al body para que el contenido no quede oculto detrás de la navbar:

body {
  padding-top: 70px; /* Altura aproximada de la navbar */
}

Colores de Navbar

Bootstrap tiene varias opciones de color predefinidas:

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

<!-- Primario (azul) -->
<nav class="navbar navbar-dark bg-primary">...</nav>

<!-- Claro -->
<nav class="navbar navbar-light bg-light">...</nav>

<!-- Transparente -->
<nav class="navbar navbar-dark" style="background: rgba(0,0,0,0.8);">...</nav>

La navbar de Bootstrap es uno de los componentes más completos y bien pensados del framework. La mayoría de proyectos web la usan directamente sin grandes modificaciones porque ya cubre el 95% de los casos de uso comunes.