CSS

Navbar Responsive: Del menú hamburguesa al off-canvas

Domina la creación de navegaciones profesionales responsive con menú hamburguesa y panel off-canvas usando Tailwind, Bootstrap, Flexbox y Grid.

¿Cuánto sabes de CSS?

📘 Teoría

Anatomía de un navbar responsive

Componentes esenciales y estructura HTML.

Un navbar responsive típico tiene: contenedor principal, logo/brand, botón hamburguesa (visible solo en móvil), y menú de navegación (que colapsa en móvil).

En desktop, el menú se muestra horizontal. En móvil, se oculta y el botón hamburguesa lo despliega vertical u off-canvas.

La estructura HTML debe ser accesible: usar , para el toggle con aria-expanded y aria-controls, y

para los links.

HTML base semántico

<nav class="navbar">
  <div class="navbar-container">
    <a href="#" class="navbar-brand">MiLogo</a>
    
    <button class="navbar-toggler" 
            aria-expanded="false" 
            aria-controls="navbar-menu"
            aria-label="Toggle navigation">
      <span class="hamburger-icon"></span>
    </button>
    
    <div class="navbar-menu" id="navbar-menu">
      <ul class="navbar-nav">
        <li><a href="#inicio">Inicio</a></li>
        <li><a href="#servicios">Servicios</a></li>
        <li><a href="#nosotros">Nosotros</a></li>
        <li><a href="#contacto">Contacto</a></li>
      </ul>
    </div>
  </div>
</nav>

Patrones de navegación responsive

3 formas de mostrar el menú en móvil.

Toggle dropdown: el menú se expande hacia abajo empujando el contenido. Simple pero puede ser molesto si el menú es largo.

Off-canvas lateral: el menú se desliza desde un lado (overlay o push). Profesional, usado en apps y sitios modernos.

Full-screen overlay: el menú cubre toda la pantalla. Dramático, ideal para portfolios y landing pages.

En esta lección nos centraremos en toggle dropdown y off-canvas lateral, los más usados en producción.

Toggle dropdown: max-height + overflow + transition para animación suave.
Off-canvas: position fixed + transform translateX para deslizar desde el lateral.
Overlay oscuro: pseudo-elemento ::before o div separado con backdrop.
Accesibilidad: aria-expanded, focus-trap, cerrar con ESC.
Performance: usar transform y opacity para animaciones (GPU accelerated).

El icono hamburguesa

Cómo crear el icono de 3 líneas animado.

El icono hamburguesa clásico son 3 líneas horizontales que se animan a X al abrir el menú.

Puedes usar un SVG, un icono de fuente (Font Awesome, Bootstrap Icons), o crearlo con CSS puro usando ::before, ::after y el elemento mismo.

La animación CSS puro es más ligera: rotas las líneas superior e inferior 45° y -45°, y ocultas la del medio con opacity: 0.

Hamburguesa animada con CSS puro

.hamburger-icon {
  display: block;
  width: 25px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background 0.3s;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s;
}

.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

/* Estado activo (X) */
.navbar-toggler[aria-expanded="true"] .hamburger-icon {
  background: transparent;
}

.navbar-toggler[aria-expanded="true"] .hamburger-icon::before {
  transform: rotate(45deg) translateY(8px);
}

.navbar-toggler[aria-expanded="true"] .hamburger-icon::after {
  transform: rotate(-45deg) translateY(-8px);
}

Método 1: Tailwind CSS

Utility classes con toggle JavaScript mínimo.

Tailwind usa breakpoints (md:, lg:) para mostrar/ocultar elementos según el viewport.

El menú está oculto por defecto (hidden) y se muestra con JavaScript añadiendo/quitando clases.

En desktop (md: y superiores), el menú se muestra siempre (md:flex) ignorando el estado del toggle.

hidden md:flex: oculto en móvil, visible en desktop.
flex-col md:flex-row: vertical en móvil, horizontal en desktop.
fixed inset-y-0 para off-canvas de altura completa.
transform -translate-x-full para ocultar fuera de pantalla.
transition-transform para animación suave.
backdrop-blur-sm para overlay moderno.

Toggle simple con Tailwind

const toggler = document.querySelector('.navbar-toggler');
const menu = document.querySelector('.navbar-menu');

toggler.addEventListener('click', () => {
  const isExpanded = toggler.getAttribute('aria-expanded') === 'true';
  toggler.setAttribute('aria-expanded', !isExpanded);
  menu.classList.toggle('hidden');
});

Método 2: Bootstrap

Componente navbar con JavaScript incluido.

Bootstrap incluye el componente .navbar con todo el comportamiento responsive built-in.

Solo necesitas la estructura HTML correcta con clases .navbar-toggler y .navbar-collapse.

El JavaScript de Bootstrap maneja automáticamente el toggle, animaciones y accesibilidad.

.navbar-expand-lg: colapsa en pantallas menores a lg (992px).
.navbar-toggler automáticamente conectado con data-bs-toggle y data-bs-target.
.collapse .navbar-collapse: animación de altura incluida.
.navbar-nav con .nav-link: estilos predefinidos.
bg-light, navbar-light: temas de color predefinidos.
No necesitas escribir JavaScript custom.

Método 3: Flexbox

CSS vanilla con media queries.

Flexbox organiza el navbar: logo a la izquierda (flex-start), menú a la derecha (flex-end o margin-left: auto).

En móvil, cambias el contenedor a flex-direction: column y ocultas el menú con max-height: 0 + overflow: hidden.

Al activar el toggle, animas max-height a un valor grande (ej: 500px) para revelar el menú.

justify-content: space-between para separar logo y menú.
margin-left: auto en el menú para empujarlo a la derecha.
Media query @media (max-width: 768px) para móvil.
max-height + transition para animación suave sin JavaScript pesado.
position: fixed para off-canvas con transform.
z-index alto para overlay sobre el contenido.

Navbar Flexbox responsive

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-menu {
  display: flex;
  gap: 2rem;
}

.navbar-toggler {
  display: none;
}

@media (max-width: 768px) {
  .navbar-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 280px;
    background: #fff;
    flex-direction: column;
    padding: 5rem 2rem 2rem;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    transform: translateX(100%);
    transition: transform 0.3s;
  }
  
  .navbar-menu.active {
    transform: translateX(0);
  }
  
  .navbar-toggler {
    display: block;
    z-index: 1001;
  }
}

Método 4: CSS Grid

Grid para navbars con layouts complejos.

CSS Grid brilla cuando tu navbar tiene múltiples secciones: logo, menú principal, menú secundario, botones de acción.

Puedes usar grid-template-columns: auto 1fr auto para: logo fijo, menú expandible, botones fijos.

En móvil, cambias a grid-template-rows para layout vertical o usas off-canvas como con Flexbox.

grid-template-columns para control preciso del ancho de cada sección.
grid-template-areas para layouts con nombres semánticos.
place-items: center para centrar verticalmente los elementos.
gap para separación sin margin manual.
Combinable con Flexbox: Grid para el navbar, Flex para el menú interno.
Ideal para navbars con buscador, iconos, avatars, etc.

Navbar con Grid (layout complejo)

.navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1rem 2rem;
  background: #fff;
}

.navbar-brand { justify-self: start; }
.navbar-menu { justify-self: center; display: flex; gap: 1.5rem; }
.navbar-actions { justify-self: end; display: flex; gap: 1rem; }

@media (max-width: 768px) {
  .navbar {
    grid-template-columns: 1fr auto;
  }
  
  .navbar-menu {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
  }
  
  .navbar-menu.active {
    max-height: 500px;
  }
}

¿Cuándo usar cada método?

Guía de decisión según necesidades.

Usa Tailwind si...

Quieres desarrollo rápido, ya usas Tailwind en el proyecto, no te importa el HTML verboso, y necesitas customización fácil con utility classes.

Usa Bootstrap si...

Necesitas un navbar funcional en 5 minutos, quieres JavaScript incluido, tu equipo conoce Bootstrap, o construyes un MVP/prototipo rápido.

Usa Flexbox si...

Tu navbar es simple (logo + menú horizontal), quieres CSS limpio y mantenible, prefieres controlar cada detalle, o estás aprendiendo responsive design.

Usa Grid si...

Tu navbar tiene layout complejo (múltiples secciones, buscador, iconos), necesitas control bidimensional preciso, o quieres combinar Grid + Flexbox.

Recomendación profesional

Flexbox para navbars simples, Grid para complejos. Los frameworks aceleran desarrollo pero añaden peso. Para producción seria, considera CSS vanilla optimizado.

Tips profesionales

Detalles que elevan tu navbar al siguiente nivel.

position: sticky + top: 0 para navbar que se mantiene visible al scroll.
backdrop-filter: blur(10px) + background semi-transparente para efecto glassmorphism moderno.
box-shadow que aparece solo al hacer scroll para feedback visual.
Animación de scroll suave con scroll-behavior: smooth en html.
Active state en el link de la página actual con aria-current='page'.
Focus visible para navegación con teclado (outline con :focus-visible).
Cerrar menú mobile al hacer clic en un link (mejor UX).
Prevenir scroll del body cuando el off-canvas está abierto con overflow: hidden.
Transiciones GPU-accelerated: transform y opacity en vez de left/right.
Prefers-reduced-motion para usuarios con sensibilidad a animaciones.