Arquitectura del Header Navigation en Shopify: Modelos de Diseño, Asignación de Espacio, Menús de Utilidad y Breakpoints
El encabezado de escritorio opera dentro de un presupuesto horizontal fijo, equilibrando la identidad de marca, las categorías de catálogo, las herramientas de utilidad y las rutas de pago.
Tratar el encabezado como un contenedor flexbox no gestionado hace que los enlaces choquen con la búsqueda, salten a una segunda línea o colapsen en menús móviles. Una navegación fiable exige una selección de diseño deliberada, presupuestación de espacio y verificación responsiva.
Respuesta rápida: ¿Qué diseño de header de Shopify se adapta a su tienda?
No existe un único mejor diseño de encabezado para Shopify. Las tiendas con catálogo suelen funcionar mejor con el logotipo a la izquierda y enlaces de categorías en línea, las boutiques pequeñas pueden usar un logotipo centrado con enlaces divididos, y las grandes tiendas multidepartamento necesitan un encabezado de dos niveles con una barra de utilidades independiente. Evite ocultar la navegación de escritorio tras una hamburguesa.
La elección de la arquitectura de encabezado de escritorio adecuada depende de cuatro modelos fundamentales:
- Logotipo a la izquierda + Navegación en línea: Ancla el logotipo a la izquierda con los enlaces de categorías fluyendo hacia la derecha. Ofrece la mayor pista horizontal para las categorías del catálogo y agrupa las utilidades a la derecha.
- Logotipo centrado + Navegación dividida (Split): Centra el logotipo, flanqueado por enlaces de categorías a ambos lados. Se adapta a catálogos pequeños, pero divide el espacio horizontal en dos tramos más cortos.
- Navegación apilada en dos niveles (Two-Tier): Reparte la navegación en dos barras horizontales. Una franja superior delgada aloja las utilidades y reserva la barra inferior para las categorías de productos.
- Cajón oculto en escritorio: Oculta los enlaces tras un icono de hamburguesa. Aunque es visualmente minimalista, Nielsen Norman Group desaconseja la navegación oculta en interfaces de escritorio.
- El riesgo del viewport en portátiles: El escalado de pantalla puede reducir el viewport CSS efectivo de un portátil muy por debajo del de un monitor de escritorio. Revise las analíticas de su tienda y pruebe su navegación en anchos de portátil.
- La hipótesis de la navegación dividida: Centrar un logotipo es una idea de diseño, no un patrón demostrado, y no encontramos ningún estudio publicado que lo pruebe. Verifique la interacción con sus propios mapas de clics o mapas de calor.
- Aislar las utilidades de las categorías: Los enlaces de utilidad son acciones y herramientas secundarias. Mantenerlos fuera de la fila de categorías deja la barra principal para las categorías de productos.
Por qué el espacio del header se agota en las pantallas de portátiles
Los diseñadores suelen revisar una plantilla en un monitor panorámico. Algunos clientes navegan en portátiles donde el escalado de pantalla del sistema operativo reduce el número de píxeles CSS disponibles para la página.
A modo de ilustración (un cálculo, no una estadística): una pantalla de 1920px de ancho con un escalado de Windows del 150 % ofrece un ancho CSS efectivo de 1280px (1920 / 1.5 = 1280). Consulte las analíticas de su tienda para conocer los tamaños de viewport que realmente usan sus clientes.
Cuando los elementos del encabezado superan el ancho horizontal, la navegación puede romperse de tres maneras distintas:
+-------------------------------------------------------------------------------+
| Wide Viewport - Illustration |
| [Brand Logo] Women Men Accessories Footwear Sale [Search] [Cart] |
+-------------------------------------------------------------------------------+
+-------------------------------------------------------------------------------+
| Laptop-Width Viewport - Unplanned Wrapping Illustration |
| [Brand Logo] Women Men Accessories Footwear |
| Sale [Search] [Cart] <-- Wraps onto second line, shifting content downward|
+-------------------------------------------------------------------------------+
- Salto de línea involuntario en flexbox: Los contenedores flex empujan las últimas categorías o los campos de búsqueda a una segunda línea, aumentando la altura del encabezado y desplazando el contenido promocional principal.
- Desbordamiento horizontal y utilidades cortadas: Los contenedores flex con nowrap empujan las utilidades más allá del borde del viewport, ocultando el carrito fuera de la pantalla o generando barras de desplazamiento horizontal.
- Colapso prematuro al cajón de escritorio: Las media queries del tema pueden pasar al menú hamburguesa móvil en un viewport de escritorio del ancho de un portátil cuando el espacio horizontal no se gestiona.
Según las guías de Cumulative Layout Shift (CLS) de web.dev, “un cambio de diseño se produce cada vez que un elemento visible cambia su posición de un fotograma renderizado al siguiente”. Un encabezado que ya salta de línea en el primer renderizado es un problema de diseño, pero no es por sí mismo un cambio de diseño. Los cambios se producen cuando el encabezado varía después de haberse mostrado, por ejemplo cuando una tipografía o un script de carga tardía altera su altura. Los cambios de diseño que ocurren dentro de los 500 milisegundos posteriores a una interacción del usuario se excluyen del CLS.
Qué dicen los estudios sobre escaneo visual, búsqueda y enlaces de utilidad
La investigación publicada sobre usabilidad ofrece algunas expectativas básicas para el diseño de encabezados de comercio electrónico. No resuelve todas las cuestiones de diseño, así que señalamos cuándo un punto es una inferencia propia.
Navegación visible frente a oculta en escritorio
En el estudio de Nielsen Norman Group de Pernice & Budiu (2016), “en escritorio, las personas usaron los menús ocultos solo en el 27 % de los casos”, mientras que la navegación visible y la combinada se usaron en el 48 % y el 50 % de los casos, respectivamente. La recomendación de NN/g es directa: “No utilice navegación oculta (como iconos de hamburguesa) en interfaces de usuario de escritorio.”
Escaneo de la esquina superior izquierda y la hipótesis de navegación dividida
El artículo de NN/g sobre el patrón en forma de F (Pernice, 2017) describe “muchas fijaciones concentradas en la parte superior y en el lado izquierdo de la página”. Un logotipo alineado a la izquierda con enlaces de categorías se sitúa en esa zona.
La navegación dividida con logotipo centrado es una hipótesis. No encontramos ningún estudio publicado que la pruebe. Si la atención comienza arriba a la izquierda, quienes exploran el flanco izquierdo deben saltar sobre el logotipo central para llegar a las categorías del flanco derecho, por lo que esos enlaces podrían recibir menos atención. Los comerciantes que usen encabezados divididos deben verificar la interacción con mapas de clics o mapas de calor.
Ubicación y tamaño del cuadro de búsqueda
La guía de NN/g sobre la búsqueda (Nielsen, 2001) indica que “en las páginas de inicio, la búsqueda debe ser un campo de texto y no un enlace”, situada en la parte superior de la página, normalmente en la esquina derecha, y “lo bastante ancha para contener la consulta típica”. Una boutique pequeña aún puede preferir un icono de búsqueda desplegable para ahorrar espacio; trátelo como un compromiso que conviene probar, no como una buena práctica investigada.
Las categorías de productos como elementos de nivel superior
Baymard Institute (2023) descubrió que “el 33 % de los sitios móviles no logra que las categorías de productos sean los elementos de nivel superior”, y señala que “tener las categorías de productos como elementos de nivel superior en los sitios de escritorio coincide con la implementación móvil ideal”. Nuestra inferencia: si “Sobre nosotros”, “Preguntas frecuentes” o “Rastrear pedido” están en la misma fila que las categorías, compiten con ellas por un espacio y una atención limitados. Es un juicio de diseño, no un resultado medido.
Comparación de cuatro modelos de diseño de header
Para elegir la arquitectura de encabezado correcta, los comerciantes deben evaluar cada modelo según la amplitud del catálogo, los requisitos de búsqueda y la carga operativa de utilidades.
| Header Layout Model | Fits Which Store Type | Search Implementation | Utility Links | Main Risk |
|---|---|---|---|---|
| Logotipo a la izquierda + Navegación en línea | Comercio minorista de catálogo de un solo departamento | Campo compacto o icono desplegable al hacer clic | Agrupados en el bloque de utilidades derecho | Salto de línea cuando las etiquetas superan el ancho disponible |
| Logotipo centrado + Navegación dividida | Boutiques pequeñas o marcas de estilo de vida de lujo | Icono minimalista con superposición modal | Repartidos entre los flancos izquierdo y derecho | Sin verificar: las categorías del flanco derecho pueden recibir menos atención |
| Navegación apilada en dos niveles | Catálogos multidepartamento y tiendas internacionales | Campo de texto amplio, destacado y permanente | Aislados en una barra de utilidades superior dedicada | Altura vertical añadida sobre el fold |
| Cajón oculto en escritorio | Marcas editoriales o de portfolio sin catálogo | Oculta dentro de un panel off-canvas | Anidados dentro de un panel off-canvas | NN/g desaconseja la navegación de escritorio oculta |
Nota: Esta comparación es un resumen de patrones arquitectónicos, no una auditoría medida de tiendas concretas.
La navegación en línea alineada a la izquierda es un punto de partida habitual en el comercio electrónico. Anclar el logotipo a la izquierda y hacer fluir los enlaces hacia la derecha da a las categorías de productos un tramo horizontal ininterrumpido.
La navegación dividida con logotipo centrado ofrece simetría editorial a las marcas con pocos enlaces. Sin embargo, al dividir el espacio, añadir categorías o selectores de localización puede provocar colisiones rápidamente.
La navegación apilada en dos niveles resuelve los conflictos de espacio separando las funciones en vertical. Los comerciantes de gran volumen pueden colocar la identidad de marca, la búsqueda abierta y las utilidades en la barra superior, y reservar la barra inferior para las categorías. La profundidad de categorías puede pasar entonces a un mega menú: Baymard indica que “los menús desplegables al pasar el ratón (también llamados ‘mega menús’) se utilizan actualmente como navegación principal en el 88 % de todos los principales sitios de comercio electrónico de EE. UU.” en su benchmark de navegación principal, cuyos ejemplos provienen de un benchmark de UX de 344 sitios de comercio electrónico. Para el diseño del propio panel, consulte nuestra guía de mejores prácticas para mega menús de Shopify.
Desde la perspectiva de la accesibilidad, la Guía de Prácticas de Autoría W3C WAI ARIA señala que “un menú que es visualmente persistente es una barra de menús (menubar)”.
Separar los menús de utilidad de la navegación del catálogo
En la arquitectura de un sitio web, la navegación de utilidades abarca las herramientas que ayudan en las tareas del cliente sin pertenecer al catálogo de productos, como el inicio de sesión de la cuenta, el seguimiento de pedidos, los selectores de moneda, los localizadores de tiendas y la atención al cliente. NN/g lo expresa así: “La navegación de utilidades consiste en acciones y herramientas secundarias”.
Figura 1: Concept illustration (ilustración conceptual) — encabezado con enlaces de utilidad mezclados en el menú principal comparado con un encabezado que los traslada a una barra de utilidades.
Según Nielsen Norman Group (Farrell, 2015), los enlaces de utilidad pueden recibir “una ubicación visual secundaria (menos prominente)” en comparación con la navegación principal.
En las tiendas Shopify, los comerciantes suelen tener tres formas de sacar los enlaces de utilidad de la fila principal. Cuáles estén disponibles depende de su tema:
- Un menú secundario o un área de utilidades en la sección Header del tema: Algunos temas ofrecen un ajuste de segundo menú o una franja delgada sobre la barra principal. Revise los ajustes del Header de su tema para ver qué ofrece.
- Una barra de utilidades superior: Si su tema admite una franja sobre el encabezado principal, puede alojar elementos como el selector de moneda, la cuenta de cliente y el seguimiento de pedidos, dejando la barra principal para los enlaces del catálogo.
- Reubicación en el pie de página: Trasladar enlaces institucionales como “Sobre nosotros”, “Prensa” y “Preguntas frecuentes” al footer despeja el encabezado sin dejar de mantenerlos accesibles.
Para una guía especializada sobre cómo simplificar la navegación en el proceso de compra, consulte nuestro análisis de la navegación en el encabezado de checkout.
Ingeniería de breakpoints: Probar el header en anchos de portátil
En lugar de confiar en la inspección visual en un monitor panorámico, planifique el encabezado con un presupuesto explícito de píxeles horizontales.
Figura 2: Concept illustration (ilustración conceptual) — un encabezado de Shopify probado en un ancho de monitor panorámico y en un ancho de portátil más estrecho donde el menú necesita un plan.
La fórmula de ancho disponible
Estime el presupuesto de píxeles horizontales disponible para los enlaces de categorías principales con esta fórmula práctica:
Available Width = Viewport Width - (Logo Width + Utility Cluster Width + Container Padding & Margins)
Max Width Per Item = Available Width / Number of Primary Links
Una estructura hipotética (sin mediciones reales): mida el logotipo, el bloque de utilidades y los márgenes de su propia tienda, réstelos del ancho del viewport para obtener el ancho disponible (Available Width) y divídalo entre el número de enlaces de categorías para obtener un presupuesto por enlace. Compare ese presupuesto con la etiqueta más ancha que mida en su tienda.
Medición del ancho real de las etiquetas en DevTools
Para verificar si la navegación encaja sin saltos de línea, audite los anchos de las etiquetas directamente en las herramientas de desarrollo del navegador:
- Abra Chrome DevTools (
Cmd+Option+IoF12) y active el modo de dispositivo (Device Mode). - Fije el ancho del viewport responsivo en el ancho efectivo de portátil del ejemplo de escalado anterior o en un ancho tomado de sus propias analíticas.
- Inspeccione la etiqueta de navegación más larga en la pestaña Computed para anotar su ancho renderizado en píxeles, incluidos el relleno y el margen.
- Multiplique el ancho de la etiqueta más larga por el número de enlaces para una comprobación conservadora. Si el total supera el ancho disponible, es probable que el menú salte de línea o se corte.
Reglas prácticas de arquitectura
Son juicios de diseño, no umbrales medidos. Confirme siempre con la comprobación de ancho anterior.
- Tienda de catálogo pequeño: Con pocas categorías principales, el logotipo a la izquierda en línea o el logotipo centrado dividido suelen encajar con más facilidad en los viewports de portátil.
- Tienda de catálogo mediano: El logotipo a la izquierda en línea puede funcionar si los enlaces de utilidad son iconos compactos y las etiquetas son cortas.
- Gran tienda multidepartamento: Con muchas categorías principales, es probable que la navegación en línea colisione en pantallas de portátil. Considere un diseño apilado en dos niveles o un mega menú que saque la profundidad de la barra.
- Tienda internacional o multidivisa: Los selectores de localización consumen espacio horizontal de utilidades. Considere trasladar los selectores a una barra de utilidades superior o al pie de página.
Cuando la navegación supera el ancho disponible, tiene tres vías de corrección: reducir los enlaces principales, acortar el texto de las etiquetas o migrar a un diseño de dos niveles. Evite colapsar prematuramente la navegación de escritorio en un cajón off-canvas.
Errores comunes en Shopify: Selectores de Markets, tamaño del DOM y mayúsculas
Construir la navegación dentro de Shopify plantea retos específicos de la plataforma.
Selectores de moneda e idioma de Shopify Markets
Las tiendas que venden en varios países suelen añadir selectores de moneda, país o idioma al encabezado. Según el tema, pueden renderizarse como botones bastante anchos con un código de moneda o una bandera. En un encabezado en línea de una sola fila, un selector ancho quita espacio a las categorías y puede provocar saltos de línea en portátiles. Considere colocar los selectores de Markets en una franja de utilidades superior o en el pie de página.
Tamaño del DOM del header y sobrecarga de Liquid
Renderizar un extenso menú desplegable multinivel directamente en Liquid añade su marcado a cada respuesta de página, y ese marcado cuenta para el tamaño del DOM de la página. Según las pautas de tamaño de DOM de Google Chrome Lighthouse, Lighthouse “avisa cuando el elemento body tiene más de ~800 nodos” y “da error cuando el elemento body tiene más de ~1.400 nodos”. Un encabezado pesado consume parte de ese presupuesto antes de que se renderice el contenido de la página. Para más información, consulte nuestra guía sobre navegación y Core Web Vitals.
Tipografía en mayúsculas y espaciado entre letras
Las guías de estilo de marca suelen especificar tipografía en mayúsculas con un espaciado de letras ampliado para los enlaces de navegación. Poner el texto en mayúsculas (text-transform: uppercase) suele ensanchar el texto en comparación con la capitalización normal, y letter-spacing añade espacio tras cada carácter. Vuelva a medir el ancho renderizado de las etiquetas siempre que cambie la tipografía de la tienda.
Límites de anidamiento nativos de los menús de Shopify
Según la documentación del Centro de ayuda de Shopify sobre menús desplegables, “el elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados”, lo que fija un techo de plataforma de tres niveles de navegación. Estos menús se configuran en el panel de Shopify y se conectan a temas como Horizon u otros de nuestro directorio de temas de Shopify.
Compensaciones: Cuándo no utilizar cada modelo de header
Cada diseño de encabezado supone un compromiso entre estética, eficiencia del espacio y facilidad para descubrir el catálogo.
| Header Layout Model | Do Not Use When | Better Alternative |
|---|---|---|
| Logotipo a la izquierda + Navegación en línea | Marcas de un solo producto con muy pocos enlaces | Logotipo de marca centrado con navegación mínima |
| Logotipo centrado + Navegación dividida | Su catálogo sigue añadiendo categorías, colecciones o selectores | Diseño apilado en dos niveles o navegación en línea alineada a la izquierda |
| Navegación apilada en dos niveles | Tiendas mobile-first donde el escritorio aporta poco tráfico | Navegación en línea de una sola fila simplificada |
| Cajón oculto en escritorio | Tiendas de catálogo que dependen de la exploración de productos | Barras de navegación visibles en línea o en dos niveles |
Las tiendas de un solo producto que usan encabezados en línea pueden acabar con un espacio vacío poco atractivo entre la marca y el icono del carrito. A su vez, un diseño dividido centrado puede quedarse sin espacio en cada lado cuando una marca añade colecciones de temporada o selectores de moneda internacionales.
Los encabezados apilados en dos niveles añaden altura vertical y empujan el contenido principal hacia abajo, así que mida la altura combinada de su barra de anuncios, su barra de utilidades y su navegación principal. Para las tiendas en las que los compradores móviles son una abrumadora mayoría, esa altura extra en escritorio puede no merecer la pena.
Por último, los cajones ocultos en escritorio van contra la guía de NN/g y contra su hallazgo de que los usuarios de escritorio usaron los menús ocultos mucho menos que los visibles (27 % frente a 48 % de los casos). Los cajones off-canvas son estándar en pantallas móviles, pero los viewports de escritorio suelen tener espacio para enlaces visibles. Para la arquitectura del cajón móvil, lea nuestra guía de diseño de menús de cajón móvil.
Lista de verificación de acciones: Audite su header de Shopify
Audite el encabezado de su tienda Shopify con esta lista de comprobación de seis pasos:
- Paso 1: Realizar la auditoría de viewport de ancho de portátil — Abra Chrome DevTools y pruebe su tienda en el ancho efectivo de portátil del ejemplo de escalado y en los anchos de sus propias analíticas. Confirme que los enlaces de categorías no saltan de línea, que no aparecen barras de desplazamiento horizontal y que el tema no colapsa en un menú hamburguesa.
- Paso 2: Sacar los enlaces de utilidad no comerciales de la fila del catálogo — Retire “Rastrear pedido”, “Sobre nosotros” y “Preguntas frecuentes” del menú principal de categorías. Reubíquelos en una barra de utilidades superior, un desplegable de cuenta o el menú del pie de página.
- Paso 3: Fijar un presupuesto de altura del encabezado — Mida la altura combinada de la barra de anuncios, la barra de utilidades y la navegación principal. Compruebe cuánto de la primera pantalla ocupan en un portátil.
- Paso 4: Auditar la tipografía de la navegación y la redacción de las etiquetas — Inspeccione la etiqueta de categoría más larga. Acorte las redacciones extensas (por ejemplo, “Men’s Outerwear and Jackets” a “Men’s Jackets”). Compruebe si el uso de mayúsculas o el espaciado de letras está ensanchando las etiquetas.
- Paso 5: Verificar el tamaño de los objetivos de clic y de toque — Asegúrese de que los iconos y enlaces del encabezado cumplen el Criterio de Éxito 2.5.8 Tamaño del objetivo (Mínimo) de W3C WCAG 2.2: un objetivo de puntero de al menos 24 por 24 píxeles CSS, o una separación suficiente alrededor de los objetivos más pequeños.
- Paso 6: Validar la navegación por teclado y la gestión del foco — Verifique que los compradores pueden recorrer su encabezado con Tab y Shift+Tab. Compruebe que Escape cierra un desplegable abierto y devuelve el foco al elemento que lo abrió, como en el Patrón Menubar de W3C WAI ARIA.
Dónde encaja Navi+
Cuando un catálogo en crecimiento supera lo que puede albergar el encabezado del tema, una opción es un trabajo personalizado en Liquid. Navi+ es una app de Shopify que construye menús independientes sin necesidad de editar el código del encabezado del tema.
- Menús de escritorio y móvil separados: Cree un Desktop Mega Menu para compradores de escritorio y configure un Mobile Menu (cajón), una Tab Bar (consulte nuestro análisis de arquitectura de barra de pestañas móvil), un Icon Menu o un Floating Button para dispositivos móviles.
- Hasta 3 niveles: Igual que los menús nativos de Shopify, los menús de Navi+ llegan hasta tres niveles. Un Desktop Mega Menu puede alojar la profundidad de categorías en un panel en lugar de en la barra del encabezado.
- Theme App Embed: Navi+ se activa mediante un theme app embed estándar de Shopify. Los menús se guardan como configuración y se procesan en el navegador mediante scripts de la app, sin necesidad de editar los archivos Liquid del tema.
No hacemos aquí ninguna afirmación sobre velocidad. Mida el efecto en su propia tienda con Google PageSpeed Insights.
Cuándo no usar Navi+: Las marcas de un solo producto o las tiendas con un catálogo muy pequeño rara vez necesitan una app de navegación de terceros. Para estas tiendas, los propios ajustes del encabezado del tema pueden bastar. Nuestras guías de configuración de Navi+ para temas de Shopify cubren los temas más populares si desea compararlos.
Si el encabezado de su tema se ha quedado sin espacio, puede probar Navi+ para construir un Desktop Mega Menu y un Mobile Menu independientes sin editar el código del tema; después, vuelva a ejecutar la comprobación de ancho de portátil de la lista de comprobación anterior.
Preguntas frecuentes (FAQ)
¿Cómo cambio el menú del encabezado en Shopify?
Abra su tema en el editor de temas y seleccione la sección Encabezado. Según el Centro de ayuda de Shopify, puede cambiar el menú principal predeterminado en la mayoría de los temas editando los ajustes de la sección Encabezado del tema.
¿Cuántos niveles puede tener un menú desplegable en Shopify?
Según la documentación oficial de Shopify, un elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados, lo que da un máximo de tres niveles de navegación.
¿Conviene usar un menú hamburguesa en escritorio?
Nielsen Norman Group lo desaconseja: “No utilice navegación oculta (como iconos de hamburguesa) en interfaces de usuario de escritorio.” En su prueba, los usuarios de escritorio usaron los menús ocultos en el 27 % de los casos frente al 48 % de la navegación visible.
¿Dónde debe ubicarse el buscador en el encabezado?
NN/g recomienda un campo de texto en lugar de un enlace, situado en la parte superior de la página (normalmente en la esquina derecha) y lo bastante ancho para contener la consulta típica.
¿Dónde deben situarse los enlaces de cuenta, pedidos y moneda?
Son navegación de utilidades: acciones y herramientas secundarias. NN/g señala que pueden recibir una ubicación secundaria y menos prominente, por lo que sirve una barra de utilidades superior o el lado derecho del encabezado, separados de las categorías del catálogo.
¿Qué tamaño deben tener los enlaces e iconos del encabezado?
Según W3C WCAG 2.2 SC 2.5.8, el tamaño del objetivo para entradas de puntero es de al menos 24 por 24 píxeles CSS, salvo que se aplique una excepción, como una separación suficiente alrededor del objetivo.
Fuentes
- Nielsen Norman Group: Pernice, K. & Budiu, R. (2016). Hamburger Menus and Hidden Navigation Hurt UX Metrics. nngroup.com/articles/hamburger-menus
- Nielsen Norman Group: Nielsen, J. (2001). Search: Visible and Simple. nngroup.com/articles/search-visible-and-simple
- Nielsen Norman Group: Pernice, K. (2017). F-Shaped Pattern of Reading: Misunderstood, But Still Relevant. nngroup.com/articles/f-shaped-pattern-reading-web-content
- Nielsen Norman Group: Farrell, S. (2015). Utility Navigation: What It Is and How to Design It. nngroup.com/articles/utility-navigation
- Baymard Institute: ‘Main Navigation’ Design Examples. baymard.com/homepage-and-category-usability/benchmark/page-types/drop-down-menu
- Baymard Institute (2023): Make Product Categories the Top-Level Navigation Items on Mobile Sites (33% Don’t). baymard.com/blog/main-navigation-product-categories
- Shopify Help Center: Set up drop-down menus in your online store. help.shopify.com
- W3C Web Accessibility Initiative: Understanding SC 2.5.8: Target Size (Minimum). w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- W3C WAI ARIA: Menu and Menubar Pattern. w3.org/WAI/ARIA/apg/patterns/menubar
- Google web.dev: Cumulative Layout Shift (CLS). web.dev/articles/cls
- Google Chrome Lighthouse: Avoid an excessive DOM size. developer.chrome.com
- Navi+: Setup guides for Shopify themes. naviplus.io/shopify-themes
Explora los temas
Esta guía enlaza a artículos específicos — profundiza en cada uno.