UX / UI
Menú hamburguesa
Lo que no se ve, no existe.
El menú hamburguesa resuelve un problema de espacio en el celular. En una pantalla grande ese problema no existe, y esconder el menú solo agrega un clic.
3 demos interactivas
Guía gratis por DM
UX / UI
Mira el reel · 1 min
01
Un clic que no tenía que existir
El menú hamburguesa (las tres rayitas) nació para pantallas pequeñas: en el celular no caben cinco opciones en una barra, así que se guardan detrás de un ícono.
En desktop tienes todo el ancho de la pantalla y aun así muchas webs esconden el menú. El resultado: tu usuario no sabe qué hay en el sitio hasta que hace clic, y lo que no ve no lo explora.
Si hay espacio, la navegación va a la vista. Es la forma más rápida de mostrar qué ofreces y de llevar a la gente a donde quiere ir.
La regla de oro
Si hay espacio, el menú va a la vista. La hamburguesa es para pantallas pequeñas.
02
Saca el menú de la hamburguesa
Mira cómo se corrige o toca cada paso: muestra, recorta, ordena, marca y separa.
03
Así no / así sí
Escondido.
Hamburguesa en desktop: dos clics para llegar a una sección y cero pistas de qué hay en el sitio.
A la vista.
Las opciones principales en la barra: el usuario ve qué hay y llega con un clic.
04
¿Cuándo sí va la hamburguesa?
Mueve el ancho de pantalla: por debajo de una tablet la hamburguesa tiene sentido; arriba, el menú va a la vista.
05
Cómo armar tu menú de escritorio
1
Muestra
Saca las opciones de la hamburguesa y ponlas en la barra superior.
2
Recorta
Máximo cinco opciones. El resto se agrupa en «Más» o va al pie de página. El logo ya lleva al inicio.
3
Ordena
Primero lo que más busca tu usuario (proyectos, productos, precios), no el organigrama de tu empresa.
4
Marca
La sección activa con color y una línea debajo, para que siempre se sepa dónde estás.
5
Separa la acción
El botón principal (cotizar, agendar, comprar) va aparte, a la derecha, con forma de botón.
06
Antes de publicar
- ¿En desktop el menú está a la vista, sin clic extra?
- ¿Tiene cinco opciones o menos?
- ¿El orden responde a lo que busca tu usuario?
- ¿Se nota en qué sección estás?
- ¿El botón de acción se distingue de los enlaces del menú?
COMENTA
“MENU”
y te envío
la guía
por DM
La guía de menú hamburguesa en PDF: seis páginas con ejemplos, reglas y la lista para revisar antes de publicar. Comenta la palabra en el reel de Instagram y te llega por mensaje directo.
Preguntas
frecuentes
¿Es malo usar menú hamburguesa en desktop?
Casi siempre. Esconde la navegación cuando sí hay espacio para mostrarla, agrega un clic y hace que la gente explore menos el sitio. En el celular, en cambio, es una buena solución.
¿Cuántas opciones debe tener el menú de una página web?
Lo ideal es cinco o menos en la barra principal. Si necesitas más, agrupa las secundarias en un «Más» o llévalas al pie de página.
¿Dónde va el botón de contacto en el menú?
Aparte de los enlaces, a la derecha, con forma de botón y color de acento. Así no se confunde con la navegación y se vuelve la acción principal.
Sigue aprendiendo
Conceptos
relacionados
Íconos con texto
Reel · 3 demos
Por qué tus íconos necesitan una palabra y cómo armar una barra clara.
Jerarquía de botones
——→ UX / UI
Jerarquía de botones
3 demos
Cómo diferenciar el botón principal del secundario y nombrar bien cada acción.
Principio KISS
2 demos
Hazlo corto y simple: quita hasta que no sobre nada y el mensaje se lea en 3 segundos.