Respuesta corta: El menú hamburguesa es el botón, casi siempre de tres rayas, que esconde la navegación de una web hasta que alguien lo toca. Úsalo en el teléfono cuando tengas más de cuatro secciones principales, no en la computadora. Ponle una etiqueta visible y deja sus enlaces en el HTML para que Google pueda rastrearlos.
Qué es un menú hamburguesa
Es un botón de menú, casi siempre dibujado con tres rayas horizontales, que abre la navegación del sitio cuando lo pides. Nielsen Norman Group lo llama navegación oculta, frente a la navegación visible, con los enlaces a la vista, y la combinada, que muestra unos y esconde el resto.
En 2016, NN/g probó la navegación con 179 participantes en seis sitios. En la computadora, la gente usó los menús ocultos en el 27% de los casos, frente al 48% con navegación visible y el 50% con la combinada.
Con la navegación oculta, encontrar contenido bajó más de un 20%, en la computadora y en el teléfono. Las tareas también tardaron más: en la computadora la gente fue al menos un 39% más lenta, y en el teléfono un 15% más que con la navegación combinada.
Cuándo usarlo
En la computadora, NN/g recomienda no usarlo: muestra las secciones principales arriba de la página o en la columna izquierda. En el teléfono no hay una regla fija. Con cuatro secciones principales o menos, muéstralas como enlaces; con más de cuatro, lo razonable es esconder algunas.
En el teléfono, esconder la navegación cuesta menos que en la computadora, y NN/g recomienda aceptar ese costo. Aun así, enlaza tus páginas importantes desde la propia página, para que nadie tenga que abrir el menú para encontrarlas.
Qué necesita cada parte del menú
| Parte | Qué hacer | Por qué |
|---|---|---|
| Navegación en computadora | Muestra las secciones, sin botón de menú | Los menús ocultos se usaron en el 27% de los casos; los visibles, en el 48% |
| Teléfono, hasta 4 secciones | Muéstralas como enlaces | La regla práctica de NN/g para teléfonos |
| Teléfono, más de 4 secciones | Esconde algunas o todas bajo un botón de menú | Esconderlas cuesta menos en el teléfono que en la computadora |
| El botón | Palabra visible, como Menú, y al menos 24 por 24 píxeles CSS | No todos conocen el icono; las WCAG 2.2 AA piden 24 por 24 |
| Los enlaces | Enlaces de verdad en el HTML antes de tocar | Google rastrea los enlaces del HTML y no toca para cargar contenido |
De Nielsen Norman Group, la W3C y el Centro de la Búsqueda de Google, consultados el 3 de noviembre de 2026.
Cómo hacer un menú hamburguesa que la gente encuentre
- Cuenta tus secciones principales. Si son cuatro o menos, muéstralas en el teléfono en lugar de esconderlas.
- En la computadora, muestra las secciones principales en la cabecera y deja el botón de menú para las pantallas pequeñas.
- Usa un botón de verdad con una palabra visible, como Menú, no solo tres rayas.
- Haz el botón de al menos 24 por 24 píxeles CSS y sepáralo bien del logo.
- Pon aria-expanded en false con el menú cerrado y en true con el menú abierto, y apunta aria-controls al menú.
- Haz que la tecla Escape cierre el menú y devuelva el foco al botón.
- Deja cada enlace del menú en el HTML como un enlace de verdad, para que Google lo encuentre sin tocar nada.
Nuestra guía de indexación mobile-first explica cómo revisar la versión para teléfono que lee Google. La guía de enlaces internos explica cómo usar los enlaces entre tus páginas para el SEO. Nuestra guía del pie de página explica la navegación del final de la página.
Cómo funciona nuestro menú
Revisamos nuestro menú el 3 de noviembre de 2026, como visitantes de una de nuestras guías. En una pantalla de 1,440 píxeles no hay botón de menú: la cabecera muestra Servicios, Trabajo, The Loop y Nuestra historia, más el botón Agenda una llamada.
En un teléfono de 390 píxeles, nuestro botón no lleva tres rayas: muestra la palabra Menú y mide 87 por 44 píxeles. Al tocarlo, aria-expanded pasa a true y se abren 13 enlaces; Escape cierra el menú y devuelve el foco al botón.
Los 13 enlaces ya están en el HTML que envía nuestro servidor, antes de tocar nada. La página no usa el rol menu de ARIA, que el ejemplo de navegación de la W3C también deja fuera.
Antes de publicar tu menú
- La computadora muestra las secciones principales sin tocar nada.
- El teléfono muestra las secciones como enlaces si son cuatro o menos.
- El botón de menú lleva una palabra visible, no solo un icono.
- El botón mide al menos 24 por 24 píxeles CSS.
- aria-expanded cambia al abrir y cerrar el menú, y Escape lo cierra.
- Cada enlace del menú está en el HTML antes de tocar el botón.
RecuerdaMuestra la navegación en la computadora. En el teléfono, escóndela solo si tienes más de cuatro secciones, y ponle nombre al botón.
Si quieres una navegación que tus visitantes encuentren en cualquier pantalla, mira nuestro servicio de diseño web.
Respuestas rápidas sobre el menú hamburguesa
¿Qué es un menú hamburguesa?
Es un botón, casi siempre de tres rayas, que esconde la navegación de una web hasta que alguien lo toca o hace clic. Nielsen Norman Group lo llama navegación oculta. Ahorra espacio en pantallas pequeñas, pero la gente encuentra menos contenido cuando la navegación principal está escondida.
¿El menú hamburguesa es malo para la usabilidad?
Tiene un costo. En el estudio de NN/g de 2016, con 179 participantes, encontrar contenido bajó más de un 20% con la navegación oculta, y las tareas tardaron más y costaron más. En el teléfono el costo fue menor, así que ahí compensa cuando tienes más de cuatro secciones.
¿Debo usar un menú hamburguesa en la computadora?
NN/g recomienda no hacerlo. En la computadora, la gente usó los menús ocultos en el 27% de los casos, frente al 48% con navegación visible y el 50% con la combinada. Hay espacio de sobra, así que muestra las secciones principales arriba o en la columna izquierda.
¿Google puede rastrear los enlaces de un menú hamburguesa?
Sí, si son enlaces de verdad en el HTML. Google rastrea los enlaces escritos como un elemento a con un atributo href, también los que JavaScript añade con esas etiquetas. Google no hace clic ni toca para cargar contenido, así que los enlaces que solo aparecen al tocar pueden quedar fuera.
¿Qué debe decir el botón del menú?
Ayuda una palabra visible, como Menú. NN/g vio que el icono de la hamburguesa no es tan universal como para que todo el mundo lo conozca, y recomienda una etiqueta legible y con buen contraste. Pon también aria-expanded en el botón, para que las tecnologías de apoyo sepan si el menú está abierto.
Fuentes
Consultadas el 3 de noviembre de 2026. Nielsen Norman Group, en inglés: Hamburger Menus and Hidden Navigation Hurt UX Metrics y How to Make Navigation (Even a Hamburger) Discoverable on Mobile. W3C Web Accessibility Initiative, en inglés: Example Disclosure Navigation Menu y Understanding SC 2.5.8 Target Size (Minimum). Centro de la Búsqueda de Google: Prácticas recomendadas sobre enlaces de Google y Prácticas recomendadas para la indexación centrada en los móviles y los sitios web móviles. Nuestro caso: el menú de una de nuestras guías a 390 y 1,440 píxeles, el 3 de noviembre de 2026.