Inicio » Blog »

14 noviembre, 2025

Barra de navegación responsive con Bootstrap

Autor: J. Luis

Bootstrap viene integrado con gran cantidad de recursos que podemos implementar en nuestros proyectos web, ahora veremos como implementar un menú

Suscríbete a nuestro canal en Youtube

INDICE

1. Método 1: Menú de Navegación Básico (Navbar Simple)
2. Método 2: Menú con Dropdowns (Submenús Desplegables)
3. Método 3: Menú Lateral (Offcanvas para Mobile)
4. Ejemplo Completo: Página con Menú Navbar y Dropdown
5. Cómo Crear un Menú con Logo en Bootstrap
6. Cómo Alinear Items en un Menú Bootstrap: Izquierda, Centro y Derecha
Descargar código

¡Hola! Si estás construyendo un sitio web y buscas cómo crear un menú con Bootstrap, esta guía te lo explica paso a paso. En Bootstrap 5.3 (la versión recomendada para 2025), los menús son fáciles de implementar con componentes como navbar, dropdowns u offcanvas para mobile. Cubro versiones básicas y avanzadas, ideales para navegación responsive. Palabras clave como menú Bootstrap, Bootstrap dropdown menu, menú responsive Bootstrap 2025 y tutorial menú navegación CSS para un SEO óptimo en Google.

Un menú horizontal que colapsa en hamburguesa en pantallas pequeñas.

Pasos:

Incluye Bootstrap 5.3 (CDN):

html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Código Completo:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <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="#">Acerca</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Explicación:
- navbar-expand-lg: Expande en large+ (≥992px); hamburguesa en mobile.
- me-auto: Empuja items a la izquierda.
- nav-item y nav-link: Estructura semántica.

Resultado: Menú horizontal en desktop, vertical en mobile.

Método 1: Menú de Navegación Básico (Navbar Simple)

Agrega subopciones para menús complejos.

Código Ejemplo:

html

<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Mi Sitio</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarDropdown">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">Inicio</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Servicios
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Web Design</a></li>
            <li><a class="dropdown-item" href="#">Desarrollo</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Consultoría</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

dropdown-toggle: Activa el desplegable.
dropdown-menu: Lista de subitems.
dropdown-divider: Separador visual.

Ventaja: Escalable para e-commerce o blogs.

Para menús verticales en sidebar, que se deslizan en mobile.

Código Ejemplo:

html

<button class="btn btn-primary d-lg-none me-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu" aria-controls="offcanvasMenu">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasMenuLabel">Menú</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Inicio</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Servicios
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">Diseño</a></li>
          <li><a class="dropdown-item" href="#">Desarrollo</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<!-- En desktop: Muestra como sidebar fijo -->
<nav class="d-none d-lg-block bg-light vh-100 p-3" style="width: 250px;">
  <ul class="nav flex-column">
    <li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>
    <!-- Más items -->
  </ul>
</nav>

offcanvas-start: Desliza desde izquierda.
d-lg-none: Oculta en desktop, usa sidebar fijo.

Ideal para: Dashboards o sitios con navegación profunda.

A Grosso Modo: ¿Qué Hace? (Recap Rápido)

Head: Configura la página (charset, responsive, título) y carga CSS de Bootstrap.
Navbar: Barra oscura con brand ("Mi Sitio"), botón hamburguesa para mobile, y lista de enlaces (Inicio, dropdown "Menú" con 3 opciones, Contacto). Se expande en desktop, colapsa en phone.
Main: Contenido simple abajo, con padding para no chocar.
Script: Carga JS de Bootstrap para que funcionen el toggler y dropdown.

Tip Extra: Para fijar la navbar arriba, agrega fixed-top a <nav> y pt-5 a <body>

Snippet listo para copiar:

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menú con Bootstrap - Guía 2025</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Mi Sitio</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMenu">
        <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 dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Menú
            </a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Opción 1</a></li>
              <li><a class="dropdown-item" href="#">Opción 2</a></li>
              <li><hr class="dropdown-divider"></li>
              <li><a class="dropdown-item" href="#">Opción 3</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contacto</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <main class="container mt-5">
    <h1>Contenido Principal</h1>
    <p>Tu página con menú responsive listo.</p>
  </main>

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

Método 1: Menú Básico con Logo a la Izquierda (Estándar)

Logo en el brand izquierdo, menú a la derecha.

Pasos:

Incluye Bootstrap 5.3 (CDN):

html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Código Completo:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <!-- Logo en brand izquierdo -->
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Logo Mi Sitio" width="30" height="24" class="d-inline-block align-text-top">
      Mi Sitio
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarMenu">
      <ul class="navbar-nav ms-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="#">Acerca</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Servicios
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Diseño</a></li>
            <li><a class="dropdown-item" href="#">Desarrollo</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Explicación Rápida:
- navbar-brand: Envuelve el <img> + texto opcional.
- ms-auto: Empuja el menú a la derecha.
- width/height: Tamaño fijo del logo (ajusta para responsive).
- En mobile: Toggler colapsa todo.

Resultado: Logo visible siempre, menú adaptable.

Método 2: Menú con Logo Centrado

Logo en el centro del navbar, menú equilibrado a los lados.

Código Ejemplo:

html

<nav class="navbar navbar-expand-lg bg-primary navbar-dark">
  <div class="container-fluid justify-content-center">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCentro" aria-controls="navbarCentro" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarCentro">
      <!-- Logo centrado -->
      <a class="navbar-brand mx-auto order-1 order-lg-0" href="#">
        <img src="logo-centro.png" alt="Logo Centrado" class="img-fluid" style="max-width: 150px;">
      </a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0 order-2 order-lg-1">
        <li class="nav-item">
          <a class="nav-link" href="#">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Acerca</a>
        </li>
      </ul>
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0 order-3">
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

justify-content-center: Centra el collapse.
mx-auto: Margen auto en el brand para centrar.
order-*: Reordena en mobile (logo arriba).

Ventaja: Look equilibrado para hero sections.

Errores Comunes y Fixes

Error	Causa	Solución
Logo no se ve en mobile	Sin img-fluid	Agrega para escalado.
Menú no centra	Sin justify-content-center	Aplícalo al container.
JS no carga	Script olvidado	Incluye bundle al final.

Ejemplo Completo: Página con Menú y Logo

Snippet listo para copiar (usa Método 1):

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menú con Logo Bootstrap - 2025</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-light fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="https://via.placeholder.com/150x50?text=Logo" alt="Logo Mi Sitio" width="30" height="24" class="d-inline-block align-text-top">
        Mi Sitio
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarMenu">
        <ul class="navbar-nav ms-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="#">Acerca</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Menú</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Opción 1</a></li>
              <li><a class="dropdown-item" href="#">Opción 2</a></li>
            </ul>
          </li>
          <li class="nav-item"><a class="nav-link" href="#">Contacto</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <main class="container mt-5 pt-5">
    <h1>Contenido con Menú y Logo</h1>
    <p>Responsive y listo para tu sitio.</p>
  </main>

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

(Reemplaza src del logo con tu imagen.)

Con navbar-brand y un <img>, tienes un menú con logo en Bootstrap pro y adaptable. Prueba el snippet y customiza. ¿Logo a la derecha o sticky? Comenta para variaciones.

Cómo Crear un Menú con Logo en Bootstrap

Las navbars de Bootstrap son flexbox por defecto, lo que facilita alinear items: izquierda (menú principal), centro (buscador/logo) y derecha (login/CTAs). Mejora UX en desktop/mobile y SEO con navegación clara (mejor crawlability).

Tip: En mobile, todo colapsa, así que enfócate en desktop con breakpoints como lg.

Método 1: Alineación Básica - Izquierda, Centro y Derecha en una Navbar

Usa ms-auto (margin-start auto) para empujar a la derecha, justify-content-center para centro, y deja el resto a la izquierda.

Pasos:

Incluye Bootstrap 5.3 (CDN):

html

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Código Completo:

html

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <!-- Items a la IZQUIERDA -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Inicio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Acerca</a>
      </li>
    </ul>

    <!-- Item al CENTRO (ej. buscador o logo) -->
    <form class="d-flex mx-auto" 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>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarAlign" aria-controls="navbarAlign" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarAlign">
      <!-- Items a la DERECHA (usando ms-auto) -->
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Explicación:
- Izquierda: <ul class="navbar-nav"> directo en el container (por defecto a la izquierda).
- Centro: mx-auto en el form (margen auto) o justify-content-center en .container-fluid.
- Derecha: ms-auto en la <ul> del collapse (empuja a la derecha).
- En mobile: Toggler colapsa, alineación se ignora.

Resultado: Menú equilibrado: enlaces izq, buscador centro, CTAs der.

Método 2: Alineación con Logo y Dropdowns

Incluye un logo centrado y dropdown a la derecha.

Código Ejemplo:

html

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container-fluid justify-content-between">
    <!-- Izquierda: Brand/Logo -->
    <a class="navbar-brand" href="#">
      <img src="logo.png" alt="Logo" width="30" height="24">
    </a>

    <!-- Centro: Items principales -->
    <div class="navbar-nav mx-auto">
      <a class="nav-link active" href="#">Inicio</a>
      <a class="nav-link" href="#">Acerca</a>
    </div>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarItems" aria-controls="navbarItems" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarItems">
      <!-- Derecha: Dropdown -->
      <ul class="navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Menú
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Opción 1</a></li>
            <li><a class="dropdown-item" href="#">Opción 2</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

justify-content-between: Distribuye espacio (izq-der).
mx-auto en items centro.
ms-auto para derecha.

Errores Comunes y Soluciones

Error	Causa	Solución
No se alinea en mobile	Collapse ignora flex	Usa d-lg-flex para desktop-only.
Items se superponen	Sin container-fluid	Envuelve todo en él.
Centro no funciona	Sin margen auto	Agrega mx-auto o justify-content-center.

Tip SEO: Enlaces con href internos para mejor indexación.

Ejemplo Completo: Página con Menú Alineado

Snippet listo para copiar (Método 1):

html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alinear Menú Bootstrap - 2025</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Acerca</a></li>
      </ul>
      <form class="d-flex mx-auto" role="search">
        <input class="form-control me-2" type="search" placeholder="Buscar">
        <button class="btn btn-outline-success" type="submit">Buscar</button>
      </form>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarAlign" aria-controls="navbarAlign" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarAlign">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link" href="#">Servicios</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contacto</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <main class="container mt-5">
    <h1>Menú Alineado: Izq, Centro, Der</h1>
    <p>Responsive y listo para usar.</p>
  </main>

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

Alinear items a la izquierda, centro y derecha en un menú Bootstrap es pan comido con flex utilities. Prueba el snippet y ajusta. ¿Más? Como offcanvas o sticky. Comenta.

Cómo Alinear Items en un Menú Bootstrap: Izquierda, Centro y Derecha

Leido 21790 veces | 1 usuarios

Descarga del código fuente Bootstrap de Barra de navegación responsive con Bootstrap

Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.