Menús para móvil

Más de la mitad del tráfico web llega desde un teléfono, así que el menú móvil no es un extra: es el menú principal para la mayoría de tus visitantes. Aquí tienes cuatro patrones probados. Usa los botones 📱 / 💻 / 🖥️ de cada demo para ver cómo se comportan en distintos tamaños.

Hamburguesa con animación a X

Cuándo usarlo: la solución estándar para sitios con 4–6 enlaces. En escritorio los enlaces se muestran en línea; en móvil se esconden tras el icono ☰, que se transforma en ✕ al abrir para que quede claro cómo cerrar.

Hamburguesa animada a X

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• El icono son tres rayas hechas con un span y sus pseudo-elementos ::before y ::after. Cambia --linea (grosor) y --ancho-icono.
• La X se forma girando las rayas 45deg y -45deg cuando el botón tiene aria-expanded="true". El CSS reacciona al atributo de accesibilidad, así que el estado visual y el anunciado siempre coinciden.
• Cambia el punto de corte @media (min-width: 768px) si tienes muchos enlaces y no caben en tablet.
• El menú se despliega animando max-height. Si añades más enlaces, sube el valor de .menu.abierto (320px).

Error común

Usar un <div> con onclick como botón. No recibe foco con Tab ni responde a Enter. Usa siempre <button> con aria-expanded, aria-controls y un aria-label, porque el icono no tiene texto visible.

Menú off-canvas lateral

Cuándo usarlo: apps web, tiendas en línea y sitios con muchos enlaces o con secciones (cuenta, ajustes, ayuda). El panel entra desde el lateral y una capa oscura indica que el resto de la página está "en pausa".

Menú off-canvas

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --ancho-panel define el ancho. El panel nunca supera el 85% de la pantalla gracias a min(var(--ancho-panel), 85vw).
• Para que entre por la derecha cambia left: 0 por right: 0 y translateX(-100%) por translateX(100%).
• --overlay controla la oscuridad de la capa de fondo.
• El JS incluye tres detalles de accesibilidad que conviene conservar: Esc cierra, el foco entra al panel al abrir y vuelve al botón al cerrar, y una trampa de foco que impide tabular fuera del panel.

Menú de pantalla completa (overlay)

Cuándo usarlo: portafolios creativos, agencias y estudios de diseño, donde la navegación también es parte de la experiencia. Los enlaces grandes funcionan muy bien en móvil.

Menú pantalla completa

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• La animación circular usa clip-path: circle(). El círculo nace en calc(100% - 60px) 38px (donde está el botón). Si mueves el botón, ajusta esas coordenadas.
• Para una apertura más simple (fundido), sustituye el clip-path por opacity: 0 → opacity: 1.
• La aparición escalonada se logra con transition-delay en cada li:nth-child(). Añade más reglas si agregas enlaces.
• --fondo-overlay y --color-primario definen el contraste. Elige colores muy contrastados para que el efecto luzca.

/* Variante: fondo con degradado */
.overlay { background: linear-gradient(135deg, #312e81, #be185d); }

Bottom navigation (barra inferior)

Cuándo usarlo: web apps y PWAs que se usan sobre todo en móvil (delivery, redes sociales, banca, reservas). Los botones quedan justo donde llega el pulgar. Ideal con 3–5 secciones principales.

Bottom navigation

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• Cambia --color-primario para el ítem activo y su "burbuja" de fondo.
• Los iconos son SVG en línea con stroke="currentColor": toman automáticamente el color del enlace. Puedes pegar cualquier icono de Lucide o Heroicons.
• padding-bottom: env(safe-area-inset-bottom) evita que la barra quede tapada por la barra de gestos del iPhone. Para que funcione, añade viewport-fit=cover al meta viewport.
• El contador rojo (.contador) es opcional. Bórralo o actualízalo desde JS con el número de notificaciones.
• En escritorio suele combinarse con una navbar o un sidebar y se oculta con @media (min-width: 768px) { .bottom-nav { display: none; } }.

Buena práctica

Prueba siempre el menú móvil en un teléfono real, no sólo achicando el navegador. Comprueba que los botones midan al menos 44×44 px (el tamaño mínimo recomendado para tocar con el dedo) y que el menú se pueda cerrar sin tener que encontrar una X diminuta.