Tema 16 · Navbar Responsiva

Barras de Navegación Profesionales (Navbar)

Aprende a maquetar cabeceras completas con .navbar: logotipo o marca .navbar-brand, enlaces responsivos, menús desplegables integrados y el botón hamburguesa colapsable con .navbar-toggler.

Navegación por Pestañas (Navs & Tabs) Controles de Entrada (Form Controls)

Estructura Estándar de una Navbar en Bootstrap 5

La barra de navegación (Navbar) es la cabecera responsiva por excelencia. Se expande horizontalmente en pantallas grandes y se colapsa automáticamente en un menú desplegable (botón hamburguesa) en pantallas móviles gracias a la clase .navbar-expand-{breakpoint}. 

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand fw-bold text-primary" href="#">Kilopolis</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menuNavbar">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Cursos</a></li>
      </ul>
    </div>
  </div>
</nav>

Componentes Internos de la Navbar

  • .navbar-brand: Para el logotipo o nombre del proyecto con espaciado y tipografía optimizada.
  • .navbar-toggler: El botón con icono de tres rayas horizontales (hamburguesa) para activar el colapso en pantallas móviles.
  • .navbar-nav: Lista ligera de enlaces (.nav-link) con estados .active y soporte para dropdowns integrados.
  • .me-auto: Empuja cualquier contenido situado después (como un formulario de búsqueda o botón de inicio de sesión) hacia el extremo derecho.

⚡ Navbar Completa con Menú Desplegable y Botón Hamburguesa

Prueba a reducir el ancho de la pantalla: la barra se colapsa automáticamente en un botón hamburguesa funcional que despliega el menú al hacer clic:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navbar en Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-3">

  <div class="container-fluid" style="max-width: 900px;">
    <!-- Navbar moderna con sombra y bordes redondeados -->
    <nav class="navbar navbar-expand-lg bg-white shadow-sm rounded-4 px-3 mb-4">
      <div class="container-fluid">
        <!-- Logo / Marca -->
        <a class="navbar-brand fw-bold text-primary d-flex align-items-center gap-2">
          <span class="fs-4">🏛️</span>
          <span>Kilopolis</span>
        </a>

        <!-- Botón Hamburguesa para Móviles -->
        <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navContenido" aria-controls="navContenido" aria-expanded="false" aria-label="Alternar navegación">
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Contenido colapsable -->
        <div class="collapse navbar-collapse" id="navContenido">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active fw-semibold" aria-current="page">Inicio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link">Manuales</a>
            </li>

            <!-- Menú Desplegable (Dropdown) -->
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Academia
              </a>
              <ul class="dropdown-menu border-0 shadow-sm rounded-3">
                <li><a class="dropdown-item">HTML5 Estándar</a></li>
                <li><a class="dropdown-item">CSS3 &amp; Grid</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item">JavaScript ES6+</a></li>
              </ul>
            </li>
          </ul>

          <!-- Formulario / Botón de Acción a la derecha -->
          <div class="d-flex align-items-center gap-2">
            <button class="btn btn-primary btn-sm px-3 rounded-pill fw-semibold shadow-sm" onclick="alert('¡Iniciando sesión en Kilopolis!')">
              Acceder al Campus
            </button>
          </div>
        </div>
      </div>
    </nav>

    <div class="p-4 bg-white rounded-4 shadow-sm border border-light-subtle">
      <h4 class="fw-bold text-dark">Área de Contenido Principal</h4>
      <p class="text-secondary mb-0">
        Prueba a encoger la ventana para verificar el botón hamburguesa interactivo (requiere el bundle JS de Bootstrap).
      </p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.