Todo lo que debes saber sobre el menú de hamburguesa para tu página web: qué es, ventajas, inconvenientes, alternativas…

Todo lo que debes saber sobre el menú de hamburguesa para tu página web: qué es, ventajas, inconvenientes, alternativas...

Esperamos que no leas este post con hambre porque, aunque vamos a hablar de hamburguesas, no nos referimos a las que se comen.

Porque este post trata sobre el menú de hamburguesa para páginas web.

¿Qué es? ¿Cuáles son sus ventajas? ¿Y sus inconvenientes? ¿Qué alternativas tienes? Todo eso y mucho más, son los temas que abarcamos en las siguientes líneas.

Un post que no te puedes perder (aunque quizás cuando termines, necesites comerte una).

¿Qué es el ‘menú hamburguesa’?

En el ámbito de las páginas web, se conoce como menú de tipo hamburguesa a la forma en la que se representa el menú principal de navegación.

¿Y por qué se le conoce con ese nombre? La razón es su diseño, que consiste en 3 rayas horizontales y paralelas, que se asemeja a una hamburguesa entre 2 rebanadas de pan.

Ejemplo de menú de hamburguesa

Su principal utilidad es la de representar el menú de cualquier tipo de web de tal manera, que ocupe muy poco espacio en pantalla.

Lo que permite mostrar mucho más contenido.

Por esa razón, (casi) todas las plantillas lo implementan en su versión para móviles.

Ventajas y desventajas de usar un menú de tipo hamburguesa

Una vez explicado en qué consiste este tipo de menú, pasamos a contarte todo lo bueno y malo que puede aportar a tu web.

Porque aunque hoy en día sea un estándar, eso no significa que sea perfecto.

Ventajas

  • Prioridad para el contenido: como hemos dicho antes, el menú son 3 rayas de la esquina y por tanto, es más fácil que las visitas se centren en tu contenido y no se distraigan con el menú.
  • Muy reconocible: como la mayoría de plantillas web y aplicaciones lo usan, los usuarios saben lo que es.
  • Aporta un diseño limpio y elegante: que tu página web luzca el mejor diseño posible es muy importante para tu posicionamiento web, y este tipo de menú ayuda a lograr una estética que atraiga más visitas.

Desventajas

  • Oculta el menú: si para tu web el menú es muy importante, quizás no sea la mejor solución porque solo se mostrará si el usuario lo decide.
  • Añade un clic más: siguiendo con el punto anterior, si el usuario quiere navegar por tu sitio, le obligas a hacer un clic (y hay quien no está dispuesto a eso).
  • Puede ser (muy) incómodo: sobre todo para encontrar el contenido que buscas, en especial en menús muy grandes y con muchas subcategorías.

Ejemplos de menú hamburguesa en páginas web

Como una imagen vale más que 1.000 palabras, a continuación te mostramos algunos ejemplos de menú de hamburguesa en la vida real.

Empezando por este blog que, como has podido ver en la imagen de más arriba, cuenta con este elemento en su versión mobile. 😉

1. Google Maps

La prueba de lo extendido que está este tipo de menú, es que el propio Google lo usa en su herramienta de mapas.

Ejemplo menú hamburguesa Google Maps

Y a pesar de lo que te hemos contado más arriba, aquí lo encontrarás también en su versión de escritorio.

Esto es porque como te hemos dicho en sus ventajas, este menú es ideal para dar la máxima prioridad al contenido y que ocupe más espacio.

Algo indispensable cuando queremos orientarnos en un mapa. 😉

>> Ir a Google Maps.

2. Bootstrap

Sobre Bootstrap ya hablamos en nuestro post sobre los mejores programas para crear páginas web sin código.

Ejemplo menú hamburguesa Bootstrap

Pero por si no lo conoces, se trata de uno de los frameworks más usados en todo el mundo para el diseño web, y la opción de empresas como Apple o la NASA.

Y aunque en su versión de escritorio mantiene el menú clásico, en cuanto que el ancho de la pantalla disminuye lo suficiente, lo cambia al menú de hamburguesa.

>> Ir a Bootstrap.

3. iLoveIMG

Esta web ya la recomendamos en nuestra guía de los mejores programas para comprimir imágenes online.

Pero en esta ocasión, también nos sirve de ejemplo para demostrar que el menú clásico y el de hamburguesa, pueden coexistir sin problemas.

Ejemplo menú hamburguesa iLoveIMG

Porque como podrás comprobar en su web, en la misma pantalla tienes las principales opciones de compresión (el menú principal) y en la esquina superior derecha, el icono de la hamburguesa (con más opciones).

Y lo mejor es que esta estructura se mantiene en cualquier tamaño de pantalla.

Es decir que no importa si entras desde el ordenador, tablet o teléfono móvil, siempre tendrás ambos menús a mano.

>> Ir a iLoveIMG.

¿Cuándo es buena idea usar el menú de hamburguesa?

Si después de todo lo que te hemos contado te sigues haciendo esta pregunta, en este apartado intentaremos darte una respuesta.

Aunque para serte sinceros, en la mayoría de casos es recomendable usar este tipo de menú para tu página web o app.

Ten en cuenta que como te hemos dicho, hoy en día es un estándar del diseño y ese estatus, solo lo consigue aquello que es realmente útil.

Dicho eso, hay ocasiones en las que quizás no sea la mejor solución. En especial cuando la navegación en tu negocio online es parte indispensable.

En esos casos (dado que este tipo de menú la esconde) es mejor usar alguna de las alternativas al menú de hamburguesa.

Como por ejemplo, usar una barra con iconos en la parte superior (o inferior). O incluso una combinación de iconos y hamburguesa, donde muestras en todo momento los apartados más importantes con los primeros y dejas la ‘hamburguesa’ para ocultar las opciones menos relevantes.

Otras opciones que tienes son:

  • Menú con scroll horizontal.
  • Botones flotantes.
  • Menú de tamaño adaptable.
  • Menú desplegable.
  • Usar pestañas en lugar de un menú.

Cualquier de ellas es una gran alternativa al menú de hamburguesa.

Esto es todo sobre el menú de hamburguesa

Ahora que lo conoces, solo te queda decidir si lo quieres en tu página web o no.

Y hablando de este tema, quizás te interese nuestro post con los mejores plugins de mega menú para WordPress.

Gracias a ellos, podrás combinar las ventajas del menú de hamburguesa, con un menú que ofrezca más opciones, facilite la navegación y te haga destacar frente a tu competencia.

¿Qué más se puede pedir?

Logo