Patrones de navegación web

Hamburger, tabs, mega menús, breadcrumbs y más: cuándo y cómo usar cada patrón de navegación

9 min

La navegación es la columna vertebral de cualquier experiencia digital. Si los usuarios no encuentran lo que buscan en los primeros segundos, se van. El patrón de navegación que elijas determina cómo el usuario descubre contenido, se orienta dentro del sitio y completa sus objetivos.

No existe un patrón de navegación universal. Cada uno tiene fortalezas y limitaciones que lo hacen más o menos adecuado según el volumen de contenido, el dispositivo, la audiencia y el tipo de producto. Esta guía analiza los patrones más utilizados con criterios prácticos para elegir el correcto.

Menú hamburger: lo escondido tiene un precio

El menú hamburger (las tres líneas horizontales) es el patrón más utilizado en móvil para ocultar la navegación principal. Su ventaja es clara: libera espacio en pantalla al esconder todas las opciones detrás de un icono. Su desventaja también: lo que no se ve, no se usa. Estudios de NNGroup demuestran que la navegación oculta reduce el descubrimiento de contenido entre un 20 % y un 50 % frente a la navegación visible.

En desktop, el hamburger rara vez tiene justificación. Si el espacio lo permite, mostrar las opciones principales en una barra horizontal siempre es preferible. En móvil, el hamburger es aceptable cuando hay más de 5-6 opciones de primer nivel, pero si puedes reducir las opciones a 4-5, una tab bar inferior es más eficaz.

  • Ventaja: máximo espacio libre en pantalla
  • Desventaja: reduce descubrimiento y engagement con secciones secundarias
  • Usar cuando: hay muchas opciones de primer nivel en móvil
  • Evitar cuando: hay 5 o menos opciones principales (usa tabs o barra visible)

Tabs y tab bars: navegación visible y directa

Las tabs (pestañas) son uno de los patrones más efectivos porque mantienen las opciones visibles en todo momento. En móvil, la tab bar inferior se ha convertido en el estándar para apps y webs con 3-5 secciones principales. Instagram, Spotify y LinkedIn la utilizan porque garantiza acceso inmediato a las secciones clave.

En desktop, las tabs horizontales funcionan bien para organizar contenido dentro de una misma página (ejemplo: tabs de producto con descripción, especificaciones, reviews). La limitación principal es la cantidad: más de 5-6 tabs en móvil no caben sin scroll horizontal, que los usuarios tienden a ignorar.

  • Ventaja: navegación siempre visible, acceso directo a secciones clave
  • Desventaja: limitada a 3-5 opciones en móvil
  • Usar cuando: hay pocas secciones principales y la navegación frecuente es clave
  • Evitar cuando: hay más de 6 secciones de primer nivel

Mega menú: para catálogos y sitios complejos

El mega menú es un panel expandible que muestra múltiples categorías y subcategorías organizadas en columnas. Es el patrón estándar en ecommerce y sitios corporativos con estructuras de contenido profundas. Amazon, IKEA y la mayoría de retailers lo utilizan porque permite al usuario ver toda la arquitectura del sitio de un vistazo.

Su implementación requiere cuidado: debe ser accesible con teclado, tener áreas de activación claras y no cerrarse accidentalmente al mover el ratón entre elementos. En móvil, el mega menú se transforma habitualmente en un menú acordeón con niveles colapsables.

  • Ventaja: muestra toda la estructura del sitio en un panel
  • Desventaja: puede abrumar si hay demasiadas opciones sin jerarquía clara
  • Usar cuando: el sitio tiene +20 categorías organizadas en grupos lógicos
  • Evitar cuando: la estructura es plana y simple (un menú horizontal basta)

Bottom navigation: accesibilidad en móvil

La bottom navigation es una barra fija en la parte inferior de la pantalla en dispositivos móviles. Es el patrón más accesible ergonómicamente: la zona inferior es la más fácil de alcanzar con el pulgar, especialmente en pantallas grandes. Google la recomienda oficialmente en Material Design para las 3-5 acciones más frecuentes.

La bottom nav funciona especialmente bien cuando los usuarios navegan frecuentemente entre pocas secciones principales. Su limitación es que compite con el contenido al fijar espacio en la parte inferior y que no escala a más de 5 elementos sin perder legibilidad.

Cómo elegir el patrón adecuado

La elección del patrón de navegación debe basarse en datos, no en preferencias estéticas. Los factores determinantes son: número de opciones de primer nivel, profundidad de la estructura, frecuencia de navegación entre secciones, dispositivo principal de la audiencia y tipo de producto (web de contenido, app, ecommerce, SaaS).

En la práctica, la mayoría de productos combinan varios patrones: una tab bar para navegación principal en móvil, un mega menú en desktop, breadcrumbs para orientación en páginas interiores. Lo importante es que cada patrón cumpla su función sin redundancia ni confusión.

  • 3-5 secciones principales, móvil → bottom tab bar
  • +6 secciones principales, móvil → hamburger con menú completo
  • Catálogo con subcategorías, desktop → mega menú
  • Aplicación con +10 secciones → sidebar colapsable
  • Estructura jerárquica profunda → breadcrumbs como complemento

Puntos clave

  • El hamburger reduce descubrimiento: úsalo solo cuando no hay alternativa visible
  • La tab bar inferior es el patrón más accesible en móvil para 3-5 secciones
  • El mega menú es imprescindible en ecommerce y sitios con estructuras profundas
  • Los breadcrumbs mejoran SEO y orientación en jerarquías de más de 2 niveles
  • Combinar patrones es normal, pero cada uno debe cumplir una función clara

¿La navegación de tu web necesita una revisión?

Analizamos la arquitectura de tu sitio y diseñamos patrones de navegación que mejoran el descubrimiento, la orientación y la conversión.