Navegación de categorías
La navegación de categorías es la barra que desplaza a los visitantes entre las secciones de un menú. Se muestra automáticamente en los archivos de menú y también incluye los controles de utilidad.
Qué contiene
- Un enlace por categoría, en el orden establecido en All categories.
- Una indicación de la sección en la que se encuentra el visitante en ese momento.
- Opcionalmente, hasta tres controles de utilidad al final: filtros, favoritos e idioma.
En un archivo de categoría también puede mostrar las subsecciones de la categoría actual.
Plano o anidado
La forma en que se muestra el árbol es un ajuste por tipo de menú:
Content settings → Content settings → Use flat category navigation for … archive
- Anidado (el valor predeterminado para la mayoría de los tipos) muestra los padres con sus hijos.
- Plano muestra todas las categorías en un único nivel. Es el valor predeterminado para la carta de vinos, porque las cartas de vinos se recorren por familias en lugar de profundizar en ellas.
Elige en función de cómo usan el menú los visitantes, no de cómo está construido el árbol. Una estructura de dos niveles puede leerse mejor en plano cuando todas las secciones tienen la misma importancia.
Los conmutadores de utilidad
Tres interruptores independientes, por tipo de menú, en la misma sección de ajustes:
| Conmutador | Qué abre |
|---|---|
| Filters toggler | El panel de filtros de alérgenos |
| Favorites toggler | Los elementos guardados del visitante |
| Language toggler | El selector de idioma |
Activa solo lo que el menú necesite. La barra es estrecha en un teléfono, y tres iconos más una lista larga de categorías compiten por el mismo espacio.
El conmutador de filtros solo es útil cuando el tipo de menú contiene información de alérgenos; consulta Filtros de alérgenos en el menú público. El conmutador de idioma solo es útil en un sitio multilingüe.
Colores
La navegación tiene tres ajustes de paleta propios, en la misma pantalla Content settings:
- Category nav divider color — la línea situada bajo la barra;
- Category nav text color — los enlaces y el indicador activo;
- Category nav background color — la barra y sus degradados laterales.
Se eligen desde la paleta del sitio en lugar de como colores libres, para que la navegación se mantenga coherente con el resto del diseño. Consulta Colores y paletas.
Cuándo no aparece
La navegación no se muestra cuando no hay nada por lo que navegar:
- un tipo de menú con una única categoría no tiene secciones entre las que desplazarse;
- una categoría sin elementos publicados no aparece en la lista.
Así que una navegación ausente suele ser una cuestión de contenido y no un problema de ajustes.
Diseñar categorías para la navegación
Como cada categoría se convierte en una entrada de esta barra:
- mantén los nombres cortos: una o dos palabras caben, cuatro no;
- mantén el número de categorías entre tres y ocho;
- pon primero la sección más utilizada, ya que es la única visible sin desplazar la barra;
- evita dos categorías cuyos nombres empiecen por la misma palabra, porque son difíciles de distinguir de un vistazo.
Compruébalo en un teléfono
- [ ] Todas las secciones son accesibles.
- [ ] La barra se desplaza con fluidez cuando hay más categorías de las que caben.
- [ ] La sección activa está claramente indicada.
- [ ] Los nombres de las categorías no se truncan creando ambigüedad.
- [ ] Los iconos de utilidad activados se pueden tocar y los desactivados están ausentes.
- [ ] Los colores tienen suficiente contraste con el fondo de la página.
- [ ] Tocar una sección realmente desplaza el menú hasta ella.