Componente Navbar (barra de navegación)

La barra de navegación (navbar) es uno de los componentes más usados en Bootstrap.

Permite crear menús responsive, adaptándose automáticamente a móviles, tablets y escritorio sin escribir CSS extra.

Estructura base de un Navbar

Toda barra de navegación parte con este contenedor principal:

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

.navbar

Define el elemento como una barra de navegación de Bootstrap.

.navbar-expand-lg

Controla desde qué tamaño de pantalla el menú se muestra completo.

El colapso responsive
 navbar-expand

Bootstrap define distintos puntos de quiebre (breakpoints):

Clase	Se expande desde
navbar-expand-sm	576px
navbar-expand-md	768px
navbar-expand-lg	992px
navbar-expand-xl	1200px
navbar-expand-xxl	1400px

Contenedor interno
 container o container-fluid

Una vez ya definimos la barra de navegación, define un contenedor para los elementos al interior. Por ejemplo:

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

• container-fluid ocupa todo el ancho de la pantalla
• container ancho centrado con márgenes

Aquí se agrupa todo el contenido del navbar.

Marca o logo
 navbar-brand

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </div>
</nav>

• Representa el logo o nombre del sitio
• Normalmente enlaza a la página principal

Bootstrap lo posiciona automáticamente dentro del navbar.

Botón hamburguesa
 navbar-toggler

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    ...
    <button class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#myNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Este botón aparece solo cuando el menú está colapsado.

Qué hace cada parte

• navbar-toggler define el botón
• data-bs-toggle="collapse" activa el colapso
• data-bs-target="#myNavbar" indica qué menú abrir/cerrar
• navbar-toggler-icon ícono hamburguesa

No necesitas JavaScript adicional: Bootstrap lo maneja solo en su fuente del bundle.

Contenedor colapsable
 collapse navbar-collapse

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

Aquí va el contenido real del menú (links, botones, formularios).

• collapse permite ocultar/mostrar el contenido
• navbar-collapse aplica estilos propios del navbar
• id="myNavbar" debe coincidir con el data-bs-target

Contenido del menú

Dentro de este contenedor normalmente se agregan los elementos del menú:

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    ...
    <div class="collapse navbar-collapse" id="myNavbar">

      <!-- Aquí se agrupan los ítems del menú -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Item 1</a>
        </li>
        ...
      </ul>
    
    </div>
  </div>
</nav>

• navbar-nav lista del menú
• nav-item ítem individual
• nav-link enlace

Bootstrap se encarga del espaciado y alineación.

Estilos y colores

Además de definir la estructura y el comportamiento responsive, el navbar puede personalizarse visualmente usando clases de utilidades de Bootstrap, las mismas que se usan en otros componentes. Por ejemplo:

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

• bg-* color de fondo

• Puedes combinar con:

  • navbar-light
  • navbar-dark

Ejemplo común:

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

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

Demostración final

Como vemos, la barra de navegación requiere clases adicionales para ajustar su comportamiento:

• .navbar define la barra
• .navbar-expand{-sm|-md|-lg|-xl|-xxl} para un colapso responsive.
• navbar-toggler botón hamburguesa
• collapse navbar-collapse menú colapsable

Bootstrap trabaja con un enfoque mobile-first. Esto significa que la barra de navegación parte colapsada por defecto y solo se expande cuando la pantalla alcanza el tamaño indicado por la clase navbar-expand. Por ejemplo, revisemos el siguiente código:

FOLDERS

Sin archivo x

          
        
            <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Navbar demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
</head>

<body>
  <!-- Navbar -->
  <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="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Pricing</a>
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </div>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
    crossorigin="anonymous"></script>
</body>

</html>

        
      

Selecciona un archivo para ver su contenido

Recuerda:

navbar-expand-lg

Esta clase le dice a Bootstrap cuándo mostrar el menú completo.

Con navbar-expand-lg, el navbar solo se expande desde los 992px hacia arriba.

En pantallas más chicas (tablets y móviles), el menú se colapsa automáticamente y se muestra como botón hamburguesa para ahorrar espacio como se puede observa la siguiente demostración.

Gracias a esto, no necesitas escribir media queries manuales: Bootstrap se encarga del comportamiento responsive del menú gracias a sus breakpoints.