El menú de navegación de un sitio web es el mapa que nos permite desplazarnos por sus páginas internas para obtener la información que deseamos. Es, por lo tanto, uno de los elementos de usabilidad más importantes. Por eso, debemos ser cuidadosos al plantear su diseño y estructura.

Son habituales los menús de navegación horizontales desplegables, donde uno o más botones encierran, a su vez, un submenú con opciones de orden inferior. Es probable que las opciones de un submenú generen a su vez nuevos submenús, dándose así múltiples niveles de profundidad. Una posible estructura de menú podría ser la siguiente, disponiendo horizontalmente a los botones de mayor jerarquía:

Quiénes somos ▽

    Historia

    Sucursales ▽

        Santa Fe

        Buenos Aires

Productos ▽

    Ropa deportiva

    Máquinas de ejercicio

Contacto

Generalmente, los submenús se despliegan cuando pasamos el cursor del mouse por encima del botón correspondiente, revelando una nueva lista de botones apilada en vertical. Casi siempre se implementan a través de listas HTML (ul, li), debidamente estilizadas con CSS para reflejar el comportamiento descrito. Los efectos de animación (opcionales) suelen lograrse con jQuery.

Sin embargo, esta solución tiene varios problemas:

• Si los submenús se despliegan al pasar el cursor por encima (:hover), en un dispositivo táctil será imposible abrirlos, ya que no existe el mouse.
• Si elegimos que los submenús se desplieguen ante un clic resolveremos el problema anterior. Sin embargo, la mejor opción para implementar este comportamiento es JavaScript. ¿Qué sucede si el usuario tiene deshabilitados los scripts?
• Siguiendo el ejemplo mencionado: los textos Quiénes somos y Sucursales ¿deberían enlazar también a páginas propias? ¿O servirían como meros títulos, sin enlace, para encabezar la sublista? Si Quiénes somos tuviera enlace pero Sucursales no, ¿cómo los diferenciaríamos visualmente?

El mayor especialista en usabilidad web, Jacob Nielsen, reconoce que estos menús ahorran espacio y ayudan a una buena navegación. Sin embargo, se utilizan para fines tan diversos que los usuarios pueden confundirse al navegar por ellos. Además, con frecuencia ofrecen tantas opciones y niveles de profundidad que terminan resultando engorrosos. Y propone una variante, los megamenús desplegables, que permiten ver todas las opciones disponibles en el primer nivel de profundidad.