Patrones de diseño de navegación: 9 layouts de menú para web y móvil
Nueve patrones de diseño de navegación que todo diseñador debería conocer, desde la barra superior hasta la paleta de comandos, con ejemplos reales y una recomendación clara sobre cuándo usar cada uno.
Patrones de diseño de navegación: 9 layouts de menú para web y móvil
La navegación no es un menú. Es una promesa sobre dónde viven las cosas. Cuando funciona, los usuarios se mueven por un producto sin pensar. Cuando falla, se van.
Los usuarios no leen la navegación. La escanean, confían en ella y solo se fijan en ella cuando falla.
Ese es el verdadero problema de diseño. La navegación no es una función para celebrar, es infraestructura para hacer invisible. Elegir el patrón equivocado para tu arquitectura de información o el contexto del usuario desencadena una reacción en cadena: las personas no encuentran las secciones, no pueden orientarse y nunca construyen un modelo mental de cómo funciona tu producto.
Nueve patrones cubren casi todos los casos. Lo que sigue es un desglose directo de cada uno, en qué es bueno, dónde falla y cuándo usarlo.
Para qué sirve realmente la navegación
La navegación responde una pregunta al usuario: ¿adónde puedo ir desde aquí? Respóndela con claridad y se mueve. Oblígalos a buscar y se van.
La función estructural de la navegación es representar tu arquitectura de información como un sistema en el que los usuarios puedan confiar. Eso significa consistencia, estabilidad y un reflejo honesto de lo que realmente hay en el producto. Una navegación que cambia entre páginas, muestra etiquetas diferentes a las URLs o entierra rutas primarias bajo secundarias es un fracaso de diseño, sin importar qué tan pulida esté la animación del dropdown. Amazon mantiene la misma navegación primaria en cada página entre cientos de millones de productos exactamente por esta razón.
La implicación práctica es que eliges un patrón de navegación basándote en dos factores: qué tan profunda y amplia es tu arquitectura de información y en qué contexto usan el producto las personas. Todo lo demás, el estilo visual, la animación, el color, se deriva de esas dos decisiones.
La barra de navegación superior
La barra horizontal superior es el estándar de la web por una razón. A escala de escritorio cabe aproximadamente cinco a siete secciones primarias en el encabezado, las mantiene visibles en todo momento y refleja cómo leen las personas: de izquierda a derecha, de arriba a abajo.
Neon (neon.tech) ejecuta una versión limpia de esto. Logotipo a la izquierda, enlaces de navegación principal centrados, inicio de sesión y un botón CTA a la derecha. Nada oculto, nada anidado, ninguna carga cognitiva. En su mejor momento, una barra superior cuenta toda la historia de la estructura de un sitio en una sola fila sin requerir ninguna interacción.
El modo de falla es el hacinamiento. Una barra superior con nueve enlaces, dos dropdowns, un menú de utilidades y un icono de búsqueda no es un patrón de navegación, es un ataque de pánico. El patrón tiene un techo duro de alrededor de seis o siete elementos antes de necesitar reestructuración.
Las barras superiores también requieren una alternativa planificada para móvil. En pantallas pequeñas el layout horizontal no tiene adónde ir. Si no decides cuál será la experiencia en viewports pequeños en el momento del diseño, terminarás añadiendo un menú hamburguesa como parche de última hora, lo que introduce nuevos problemas.
El menú hamburguesa
El menú hamburguesa (tres líneas apiladas, abre un drawer u overlay al tocar) oculta la navegación detrás de una interacción adicional. Ahorra espacio en pantalla. También hace que cada sección de tu producto sea menos descubrible.
La investigación al respecto no es ambigua. NNGroup encontró que la navegación con pestañas en móvil supera consistentemente a los menús hamburguesa en descubribilidad y tasas de finalización de tareas. Cuando ocultas la navegación, las personas la usan menos. Los elementos detrás del hamburguesa se perciben como de menor prioridad, porque visualmente lo son.
Eso no convierte al hamburguesa en algo incorrecto. Lo convierte en una compensación. Para sitios con secciones profundas y de acceso poco frecuente, la compensación es aceptable. Para aplicaciones que las personas abren diariamente, generalmente es un error.
Instagram intentó poner la navegación principal detrás de un hamburguesa y dio marcha atrás, moviendo las secciones principales a una barra de pestañas inferior. La lección es clara: usa un hamburguesa para rutas secundarias, configuraciones y destinos poco frecuentes. Nunca lo uses para las acciones que definen por qué alguien abrió el producto.
La barra lateral persistente
Una barra lateral persistente fija una columna de navegación completa a la izquierda de la pantalla y permanece visible mientras el usuario hace scroll por el contenido. Es el patrón dominante para dashboards, herramientas de diseño y documentación extensa, porque la permanencia espacial es la función.
Los docs de Tailwind CSS lo usan exactamente bien. La barra lateral izquierda contiene cada sección de la documentación, agrupada y con scroll, mientras el contenido ocupa el ancho restante. Los usuarios siempre saben dónde están, adónde pueden ir y cómo está organizado todo el espacio de información. Esa conciencia espacial es el objetivo en material de referencia extenso donde las personas saltan constantemente entre secciones.
Slack, Notion y Figma usan barras laterales persistentes a escala de aplicación por la misma razón. La barra lateral es el mapa. Eliminarla significaría que los usuarios reconstruyen ese modelo mental con cada acción de navegación, lo cual es un coste que no deberían tener que pagar.
El coste es el espacio horizontal en pantalla. En una laptop de 13 pulgadas, una barra lateral persistente usa de 250 a 300 píxeles de tu área de contenido. En móvil, no hay espacio para ella en absoluto.
Las barras laterales responsivas colapsan en un drawer o hamburguesa en pantallas pequeñas, reintroduciendo los mismos problemas de descubribilidad que intentabas evitar. Vincúlala a los tokens que mantienen la navegación consistente desde el principio, o estarás parcheándola después.
La barra de pestañas inferior
La barra de pestañas inferior ancla de tres a cinco iconos en la parte inferior de una pantalla móvil, directamente dentro de la zona del pulgar. Es el estándar para aplicaciones móviles nativas y, a partir de 2026, el estándar para cualquier producto web que las personas abren diariamente en sus teléfonos.
Instagram, Spotify y YouTube usan este patrón para su navegación móvil principal. No son coincidencias. La barra inferior existe porque la parte superior de la pantalla de un teléfono es la zona más difícil de alcanzar con un pulgar, y la navegación se toca constantemente. Mover los destinos primarios a la parte inferior reduce el esfuerzo físico de una manera que se acumula en miles de sesiones diarias.
Cinco elementos es el techo duro. Más de cinco, los iconos se reducen y las etiquetas se cortan. Si tu producto tiene más de cinco secciones primarias, eso es un problema de arquitectura de información disfrazado de problema de navegación. Reestructura antes de elegir un patrón.
En 2026, la barra de pestañas inferior es el estándar para cualquier producto que las personas abren al menos diariamente en móvil. Si estás diseñando un producto móvil de consumo o una aplicación web progresiva móvil-primero y no usas una barra inferior, necesitas una razón específica para no hacerlo. "Diseñamos primero para escritorio" no es esa razón.
El mega menú
Un mega menú expande un solo elemento de navegación superior en un panel amplio de múltiples columnas con enlaces, categorías y a veces tiles de vista previa. Está diseñado para sitios con catálogos grandes y jerarquías complejas que no caben en un dropdown simple sin volverse inutilizables.
Amazon ejecuta una versión extrema de esto en su menú "All". Docenas de categorías con subcategorías, organizadas en columnas y grupos, todas visibles en un panel. El patrón funciona bajo la presión de un catálogo porque expone profundidad sin requerir múltiples clics en una jerarquía. Todo es escaneable en una sola vista.
El problema es que los mega menús son un patrón solo para escritorio por diseño. Un panel dropdown de múltiples columnas no se traduce a móvil. Los sitios que los usan necesitan una estrategia de navegación completamente separada para pantallas pequeñas, lo que duplica el área de superficie de diseño y mantenimiento.
Los mega menús también fallan en sitios superficiales. Doce páginas no justifican un mega menú. El patrón implica una complejidad que necesitas haber ganado a través de tu profundidad de contenido real, no solo optimismo sobre el crecimiento futuro.
Migas de pan
Las migas de pan muestran la ruta desde la página de inicio hasta la página actual: Inicio > CSS > Grid. No son navegación primaria. Son navegación de orientación y cumplen una función precisa.
MDN usa migas de pan en cada página de referencia. Cuando llegas a la documentación de CSS grid desde una búsqueda de Google, la ruta de migas te dice instantáneamente que esta página vive dentro de CSS, que vive dentro de References. Ese contexto colapsa una jerarquía de tres niveles en una sola línea que no requiere ninguna interacción para interpretarla.
Las migas de pan son inútiles en sitios planos. Si todo tu producto tiene dos niveles de profundidad, las migas añaden ruido visual sin proporcionar ningún valor de orientación. Ganan su lugar en sitios de documentación, jerarquías de e-commerce como Inicio > Hombres > Chaquetas > Impermeables, y cualquier sitio donde los usuarios llegan regularmente a páginas profundas desde búsquedas.
Se combinan con otros patrones en lugar de reemplazarlos. Las migas de pan se ubican sobre el contenido, complementando una barra superior o barra lateral. Para más análisis de diseño web y UI, la misma lógica aplica: los elementos de navegación secundarios deben apoyar el patrón primario, no competir con él.
La paleta de comandos
La paleta de comandos es un overlay activado por teclado, típicamente invocado con Cmd+K o Ctrl+K, que acepta texto y devuelve acciones clasificadas, destinos de navegación y resultados de búsqueda. Linear, Raycast, Slack y Figma la incluyen como una superficie de navegación de primer nivel.
En 2026, la paleta de comandos ha pasado de ser un truco para usuarios avanzados a un mecanismo de navegación primario en software de productividad serio. El Cmd+K de Linear te lleva a cualquier issue, proyecto o acción del workspace en menos de dos segundos. Raycast está construido casi completamente alrededor de este patrón. Estos productos tratan la intención escrita como un camino más directo que cualquier jerarquía de menú, porque para las personas con hábitos de teclado, lo es.
El modo de falla es la invisibilidad. Los usuarios que no conocen el atajo nunca lo descubrirán por exploración. Las paletas de comandos no pueden reemplazar la navegación visible para usuarios nuevos o para cualquiera que no tenga hábitos orientados al teclado. Los productos que ocultan toda la navegación detrás de Cmd+K dejan a cada nuevo usuario desorientado.
El uso correcto es de aumento, no de reemplazo. Ejecuta una paleta de comandos junto a tu barra lateral o barra superior. Deja que los usuarios con dominio del teclado se salten el menú por completo.
Deja que todos los demás naveguen visualmente. Ambas rutas necesitan existir.
Encabezados fijos y que se encogen
Un encabezado fijo permanece anclado en la parte superior del viewport mientras el usuario hace scroll. Un encabezado que se encoge hace lo mismo pero reduce su altura después de que el usuario pasa un umbral de scroll, recuperando espacio vertical sin sacrificar el acceso a la navegación.
Ambos patrones mantienen la navegación accesible en páginas largas sin requerir scroll de vuelta al principio. En páginas con mucho contenido, esto es una mejora real de usabilidad. GitHub usa un encabezado fijo en todas las páginas de repositorio para que la navegación primaria, la búsqueda y el contexto del repositorio siempre estén a la vista mientras haces scroll por issues, código y debates.
El coste es el espacio vertical en pantalla. Un encabezado fijo de 60 a 70 píxeles reclama esa altura desde cada posición de scroll. En una tablet de 768 píxeles de altura, eso es cerca del 10 por ciento del viewport permanentemente ocupado por navegación. Los encabezados que se encogen recuperan algo de eso al reducirse a alrededor de 40 píxeles tras el scroll, pero requieren una implementación cuidadosa para sentirse intencionales y no rotos.
Evita los encabezados fijos en páginas cortas donde el usuario llega al fondo rápidamente. El patrón gana su lugar en páginas largas y densas en contenido donde volver al principio requeriría un scroll significativo.
El footer expandido
El footer expandido es un footer amplio de múltiples columnas que contiene navegación secundaria, categorías de enlaces, páginas legales e información de contacto. No es navegación primaria. Es una segunda oportunidad para usuarios que hacen scroll por el contenido principal sin encontrar lo que necesitaban.
Tailwind CSS, Stripe y la mayoría de los sitios de marketing SaaS usan footers expandidos con cuatro a seis columnas que cubren enlaces de producto, documentación, páginas de empresa, legales y enlaces sociales. No cuestan nada en altura de viewport durante la experiencia del contenido principal y proporcionan un mapa útil para usuarios que llegan al fondo buscando algo específico.
Los footers expandidos importan más para el SEO que para la navegación en vivo. Cada enlace en un footer expandido es una ruta rastreable. Son una de las principales formas en que los motores de búsqueda descubren páginas secundarias y terciarias en un sitio. Desde una perspectiva de usabilidad pura, la mayoría de los usuarios nunca hace scroll hasta el footer, pero los que lo hacen están en una búsqueda deliberada.
Omite el footer expandido dentro de experiencias de productos con sesión iniciada. Notion no te muestra un footer de marketing dentro del editor. El patrón pertenece a sitios de marketing y centros de documentación donde usuarios anónimos y nuevos navegan libremente.
Cómo elegir el patrón correcto
El patrón de navegación correcto se deriva de dos factores: la profundidad de tu arquitectura de información y el contexto en que las personas usan el producto. Todo lo demás es una consecuencia de esos dos factores.
| Tipo de producto | Profundidad de IA | Plataforma principal | Patrón recomendado |
|---|---|---|---|
| Sitio de marketing | Superficial | Escritorio + móvil | Barra superior + footer expandido |
| Marketing SaaS, catálogo grande | Media a profunda | Escritorio + móvil | Barra superior + mega menú (escritorio), hamburguesa (móvil) |
| Documentación | Profunda | Escritorio | Barra lateral persistente + migas de pan |
| Dashboard o herramienta de diseño | Media a profunda | Escritorio | Barra lateral persistente |
| E-commerce | Profunda | Escritorio + móvil | Mega menú (escritorio), barra inferior o hamburguesa (móvil) |
| Aplicación móvil de consumo | Media | Móvil | Barra de pestañas inferior |
| Herramienta de productividad o desarrollo | Profunda | Escritorio + teclado | Barra lateral persistente + paleta de comandos |
| Editorial o blog | Superficial | Escritorio + móvil | Barra superior + encabezado fijo en lecturas largas |
Combinar patrones es normal y esperado. La mayoría de los productos serios usan dos o tres. La documentación de Tailwind CSS usa una barra superior para la navegación del sitio, una barra lateral persistente para la navegación de los docs y migas de pan para la orientación a nivel de página. Esos tres patrones abordan tres niveles distintos de la jerarquía de navegación simultáneamente sin solapamiento.
Brainy ayuda a los diseñadores a tomar decisiones más precisas, más rápido, en el trabajo que realmente se publica. Mira lo que estamos construyendo para creadores.
Errores de navegación que silenciosamente arruinan la usabilidad
Ocultar acciones primarias en un menú hamburguesa. Si los usuarios necesitan una función diariamente, no puede vivir detrás de un toque adicional. Mide la tasa de clics en el propio hamburguesa. Si está por debajo del 30 por ciento, los caminos dentro son invisibles para la mayoría de tus usuarios.
Etiquetado inconsistente entre superficies. "Insights" en el dashboard, "Reports" en el email de onboarding, "Analytics" en los docs de ayuda, todos apuntando al mismo destino. La navegación es un vocabulario. Cada sinónimo es un signo de interrogación en el modelo mental del usuario.
Sin estado activo en la ubicación actual. Los usuarios necesitan saber dónde están. Un estado activo en el elemento de navegación actual es la señal de orientación más básica disponible. Omitirlo obliga a los usuarios a leer la URL, lo cual es un modo de falla que diseñaste en el producto.
Navegación que cambia por página o sección. Si la barra lateral se reorganiza según la sección en la que está el usuario, has roto la memoria espacial que construyeron. La navegación debería ser un mapa fijo. Los productos donde el mapa cambia según la posición no generan confianza en el usuario, la destruyen.
Sobreuso del anidamiento. Un dropdown de tres niveles de profundidad es casi siempre un problema de arquitectura de información expresado incorrectamente en la UI. Aplana la estructura primero. Los menús anidados son lentos de escanear, imposibles de usar al tacto y requieren un control preciso del ratón para mantenerse abiertos al pasar el cursor.
Para patrones de layout diseñados para escanear, el mismo principio aplica: la estructura y la orientación van antes que la decoración. Una navegación que no logra orientar es decoración en el mejor caso, fricción en el peor.
Preguntas frecuentes
¿Cuál es el patrón de navegación más utilizado en la web?
La barra de navegación horizontal superior es el patrón más común para sitios de escritorio. Para aplicaciones móviles y productos de uso diario, la barra de pestañas inferior se ha convertido en el estándar. La mayoría de los productos reales usan ambos, una barra superior en escritorio y una barra inferior en móvil, sobre una arquitectura de información consistente.
¿Cuándo debería usar un menú hamburguesa?
Usa un menú hamburguesa para navegación secundaria o de uso poco frecuente en móvil, no para secciones primarias. Si un usuario tiene que abrir el hamburguesa para hacer la función principal de tu producto, la arquitectura necesita reestructuración, no un ícono mejor.
¿Cuántos elementos debería tener una barra de navegación?
Cinco a siete elementos es el techo aceptado para una barra horizontal superior, y cinco para una barra de pestañas inferior en móvil. Más allá de esos números el patrón comienza a fallar, los elementos se amontonan, las etiquetas se truncan y escanear cuesta más de lo que aporta.
¿Puedo usar múltiples patrones de navegación en un mismo sitio?
No solo puedes, sino que deberías. La mayoría de los productos reales usan dos o tres patrones que abordan diferentes niveles de la jerarquía de navegación. Los sitios de documentación suelen combinar una barra superior para la navegación del sitio, una barra lateral persistente para la navegación de sección y migas de pan para la ubicación en la página.
Cada patrón maneja una capa distinta sin solapamiento. El error es usar múltiples patrones que compiten en lugar de colaborar.
¿Cómo afecta la navegación al SEO?
Los enlaces en tu barra superior, barra lateral y footer expandido pasan autoridad de página y ayudan a los motores de búsqueda a descubrir e indexar páginas. Las migas de pan añaden datos estructurados que pueden mostrar información de ruta directamente en los resultados de búsqueda. La navegación es parte de tu arquitectura SEO y debe tratarse como tal desde el primer día, no añadirse como parche después.
Deja de obligar a la gente a buscar
La navegación es invisible cuando funciona e irritante cuando no. El objetivo nunca es un menú bonito. El objetivo son usuarios que llegan, se orientan, se mueven y regresan sin un solo momento de fricción.
Nueve patrones cubren casi todo: la barra superior para sitios de marketing y referencias amplias, la barra lateral persistente para herramientas y documentación profundas, la barra de pestañas inferior para móvil de uso diario, el mega menú para profundidad de catálogo, las migas de pan para orientación jerárquica, la paleta de comandos para herramientas de productividad orientadas a la velocidad, los encabezados fijos para contenido de formato largo, el hamburguesa como alternativa para rutas secundarias y el footer expandido como mapa de segunda oportunidad para sitios de marketing.
Elige según la profundidad de la arquitectura de información y el contexto de uso. Combina dos o tres patrones cuando tu producto tiene múltiples niveles de jerarquía de navegación. Evita los errores que silenciosamente se acumulan: acciones primarias ocultas, etiquetas inconsistentes, estados activos ausentes, estructuras de navegación cambiantes y anidamiento excesivo.
Explora más análisis de diseño web y UI en Brainy Papers, o construye junto a la comunidad de creadores de Brainy y perfecciona el oficio junto a más de 2 millones de diseñadores que se preocupan por hacer bien los fundamentos.
Brainy helps designers make sharper calls, faster, on the work that actually ships. See what we are building for creators.
Get Started
