Un menú hamburguesa o menú hamburguesa web es un icono con tres líneas horizontales que mejora la UX en apps y páginas web móviles. Se usa código para ocultar o mostrar opciones de navegación al interactuar con él.
Consejo Importante: si es necesario, incluye una opción de cierre clara, como una «X», para que los usuarios puedan salir rápidamente del menú.
Lecturas recomendadas:
¿Qué es el footer o pie de página de un sitio web?
Características de una buena web
¿Cómo mejorar una web?
¿Qué es el menú hamburguesa en diseño web? Definición, Significado & Concepto
El menú hamburguesa o en inglés hamburger menu, es un botón que se usa en sitios web y aplicaciones que, cuando se lo presiona, despliega una lista de enlaces.
Se lo denomina como menú hamburguesa porque tiene un gran parentesco con el popular alimento:
- Sus tres rayas horizontales y la forma en la que se presentan tienen similitud con el pan, carne, pan de la hamburguesa
Lo puedes hallar tanto en versiones móviles como escritorios (más adelante observa ejemplos reales)
¿Cómo se llama el menú hamburguesa?
Otras formas con las que se nombran el menú hamburguesa son:
- Barra triple
- Icono de la barra triple
- Icono de hamburguesa
- Botón de hamburguesa
- Icono menú hamburguesa
¿Quién creó el menú de hamburguesas?
El menú hamburguesa fue creado por Norm Cox en 1981. Su primera aparición fue en la interfaz gráfica de usuario, Xerox Star.
Objetivo del botón hamburguesa web
Al implementar el botón hamburguesa, puedes:
- Optimizar el espacio: es ideal para pantallas pequeñas donde el espacio es limitado
- Mantener el minimalismo: el diseño moderno y ordenado es atractivo
- Mejorar la accesibilidad: facilita a los usuarios encontrar lo que buscan rápidamente, sin abrumar con demasiadas opciones visibles de inmediato
Diferencia entre el menú hamburguesa y los botones de navegación tradicionales
3 diferencias son:
- Espacio y diseño: el menú hamburguesa es compacto y minimalista, mientras que los botones de navegación tradicionales suelen ocupar más espacio en la pantalla
- Interacción del usuario: los menús tradicionales muestran todas las opciones a la vista, mientras que el menú hamburguesa requiere que los usuarios hagan clic para revelar las opciones, manteniendo la pantalla inicial más ordenada
- Estética: si buscas un diseño moderno y limpio, el menú hamburguesa es una gran opción, a diferencia del enfoque más tradicional que puede parecer anticuado
Ventajas del menú hamburguesa web
Estas son algunas ventajas del menú hamburguesa:
1. Ahorra espacio
El menú hamburguesa ahorra espacio al ser pequeño. Con su implementación se logra «guardar» enlaces que podrían estar estrechamente esparcidos en la cabecera de la web.
2. Brinda organización
Al ser capaz de ocultar los enlaces, hace que todo se vea más limpio y organizado en el sitio. Además, los links que incluyas en el menú WordPress pueden estar organizados de la manera que prefieras.
3. Es bastante reconocido por los usuarios de internet
Aunque la mayoría de los usuarios no tengan claro cuál es el nombre de este icono, es bastante evidente que lo pueden reconocer fácilmente como uno de los elementos de navegación en el sitio.
Desventajas del menú burger web
3 contras del menú hamburguesa son:
1. Exige más tareas para el usuario
Con el menú hamburguesa el internauta tiene que realizar más tareas. Por ejemplo:
Jorge aterriza a un sitio web en el que debe localizar el menú hamburguesa y hacer clic sobre él. Después tiene que visualizar la lista de los enlaces para ver cuál quiere y, finalmente, presionar sobre la página que desea.
Lo anterior demanda más acciones por parte de los navegantes, por lo que puede afectar en sus respectivos compromisos.
2. Probabilidades de no ser reconocido
Si bien el menú hamburguesa es popular en la red, todavía existe la posibilidad de que NO todos sepan de qué se trata o para qué sirve.
Por ejemplo, si el público de un sitio de internet es de edad vieja, el reconocimiento del menú hamburguesa (y su utilidad) no les será, al menos inicialmente, sencillo. Lo que producirá poca interacción.
3. Podrían pasarlo por alto
Al esconder las páginas detrás de un menú hamburguesa, es posible que los visitantes primerizos del sitio las pasen por alto y se vayan sin prestarles atención.
Ejemplos de menús hamburguesa
Te enseño un ejemplo de menú hamburguesa en escritorio, app y móvil.
Menú hamburguesa en diseño web escritorio
Así se ve desplegado el menú:
Menú tipo hamburguesa en app
Así se ve desplegado el menú:
Botón de hamburguesa en móvil
Así se ve desplegado el menú:
Por qué escoger el menú de hamburguesa web
El menú hamburguesa es genial si quieres que tus usuarios tengan una experiencia sencilla y sin distracciones. Con este menú, puedes mantener tu sitio limpio y centrado en el contenido importante. Además, la gente solo verá las opciones cuando realmente las necesite.
Este tipo de menú también tiene un estilo moderno que a la mayoría de las personas les resulta familiar.
Qué considerar antes de hacer un menú de hamburguesa
Ten en cuenta estos aspectos:
- Simplicidad: mantén el menú intuitivo para que los usuarios puedan navegar sin complicaciones
- Animaciones suaves: implementa transiciones rápidas que no frustren a los usuarios
- Iconografía clara: verifica de que el icono del menú sea reconocible y universal
¿Cómo crear un menú hamburguesa?
Los pasos pueden ser parecidos:
1. Entra a «Personalizar» de tu tema WordPress:
2. Ve a la versión móvil:
3. Anda a la edición de tu cabecera:
4. Incorpora el menú hamburguesa en el espacio que desees:
Guarda los cambios.
Plugins para diseñar un menú hamburguesa
Existen varias maneras para diseñar un menú hamburguesa para tus páginas web, por ejemplo, una es usando plugins como WP Mobile Menú o WP Responsive Menú.
Aquí otras alternativas para realizar un menú tipo hamburguesa:
Cómo hacer un menú hamburguesa en HTML Y CSS sencillo
Sigue estos pasos:
1. Estructura HTML:
- Crea un «nav» con una clase de menú y un contenedor para el icono del menú hamburguesa
- Incluye una lista «ul» para los elementos del menú
2. Estilos CSS:
- Define estilos para ocultar la lista «ul» por defecto y mostrar el icono del menú
- Usa media queries para mostrar la lista al hacer clic en el icono del menú
3. Interactividad con JavaScript:
- Agrega un script para alternar la visibilidad de la lista cuando se haga clic en el icono del menú
Cómo realizar un menú hamburguesa con Elementor en WordPress
Si utilizas Elementor Pro, sigue estos pasos para iniciar un menú hamburguesa:
1. Dirígete al menú de la parte izquierda de WordPress, ubícate en la sección «Plantillas» y haz clic en «Theme Builder»:
2. Se abrirá una ventana en la cual debes escoger la opción «Añadir nueva» que se encuentra en la parte superior al lado de «Maquetador de temas»:
3. Elige la opción «Header» en el apartado «Tipo de plantilla», créale un nombre a la plantilla y da clic en «Crear plantilla». Seguidamente, mira si deseas una plantilla prediseñada o cierra la ventana:
4. Escoge la estructura para el header:
5. Escribe «Nav menu» en la barra de búsqueda que se encuentra en la izquierda:
6. Arrastra y suelta el bloque a la sección del header en la que deseas integrarlo.
7. En la sección «Contenido» localiza «Layout» y en la derecha del mismo abre el desplegable y elige la opción «Dropdown»:
8. El menú hamburguesa está hecho, ahora puedes personalizarlo a tu gusto en las diferentes secciones.
¿Dónde coloco el ícono hamburguesa: en la izquierda o derecha de la esquina superior?
Esto no es un factor crucial. De hecho, no pensaría tanto en qué lado debe estar el menú hamburguesa, pero si quieres una «regla» a seguir, te la dejo:No te rompas la cabeza por este detalle.
Si la audiencia de tu sitio lee y escribe de izquierda a derecha, sería interesante colocar el menú hamburguesa en la esquina superior izquierda porque es probable que lo vean inmediatamente por intuición.
Sí, en cambio, el público objetivo del sitio lee y escribe de derecha a izquierda, podrías ubicar el menú en la esquina superior derecha (por el mismo motivo pasado).
Lo que te menciono no es más que una «regla» que podría ser ignorada. Al final, existen grandes sitios con excelentes rendimientos que no tienen el menú ubicado en el lado que leen y escriben sus usuarios.
Mi opinión sobre el menú hamburguesa en una página web
Si estás diseñando tu primer sitio digital, aplica un menú hamburguesa para que evites complicaciones y ahorres tiempo.
Es lo que haría si iniciara de nuevo…
Los temas WordPress como Astra te facilitan mucho este proceso de creación.
Preguntas frecuentes acerca de los menús de hamburguesas
¿Qué es el menú hamburguesa en HTML?
Es un ícono con tres líneas que despliega un menú al tocarlo.
¿El menú hamburguesa beneficia a la UX?
Sí, simplifica la navegación en dispositivos móviles y permite ahorrar espacio.
¿Se puede montar un menú hamburguesa CSS responsive?
Afirmativo, se puede crear un menú hamburguesa responsive usando solo HTML y CSS.
¿Hay plantilla de menú de hamburguesas?
Sí, hay muchas plantillas disponibles en sitios como CodePen y GitHub.
¿Cuál es un ejemplo de código de menú de hamburguesa?
Primera línea de código: <button class=»menu-toggle»>☰</button>
Segunda línea de código <nav class=»menu»>…</nav>
¿Menú hamburguesa CSS sin JavaScript?
Claro que puedes hacer un menú hamburguesa funcional solo con CSS usando el selector :checked.
Recurso visual del significado del icono menú hamburguesa
Conclusión
El menú hamburguesa es un icono en forma de tres líneas horizontales que agrupa opciones de navegación en sitios web, comúnmente utilizado en WordPress para mejorar la experiencia del usuario.
¿Conocías todo esto acerca del menú hamburguesa web?
Este artículo fue actualizado el 25 de Marzo del 2025
