Cabecera y menú

Definición

En la cabecera se incluye el menú de navegación y el auxiliar. Desde el menú de navegación se proporciona acceso a las principales secciones de un sitio web, que al activarse despliega un megamenú con la estructura de la sección y las opciones disponibles dentro de la arquitectura de información del sitio web. Los mega menús proporcionan espacio suficiente para imágenes y otros contenidos ricos que facilitan el acceso a la información y servicios.

En el menú auxiliar se recogen elementos de apoyo a la navegación: mapa web y contacto, configuraciones como cambio de idioma o accesibilidad y el acceso a redes sociales.

Anatomía

En el menú de escritorio se incluye:

1. Marca
2. Navegación auxiliar: franja en la que se recogen elementos de apoyo a la navegación
3. Menú de navegación: Se compone de cada uno de los elementos con icono representativo y etiqueta
4. Epígrafe: se corresponde con la opción seleccionada en el menú
5. Contenedor con opciones de megamenú
6. Aspa de cierre de menú

Tipos

Por defecto

Esta sección muestra una vista previa del componente ajustada al tamaño del visor. Accede al componente al completo en el siguiente enlace:

• Cabecera

Pautas de uso

Elementos de menú principal de navegación

• El menú debe ofrecer acceso a las principales secciones del sitio
• No incluyas más de 9 elementos por menú

Asegura que el menú se pueda cerrar fácilmente

• Incluye un aspa de cierre en la esquina superior del menú en escritorio y sustituyendo al menú hamburguesa en el móvil
• Haz posible que se cierre al realizar scroll sobre la página con el mega menú desplegado o haciendo click fuera del área del menú

Incluye elementos relevantes en el megamenú

• Organiza el contenido por bloques conceptuales claros
• Incluye solo los elementos más relevantes
• Limita la profundidad jerárquica
• Máximo dos niveles visibles
• Usa un enlace “Ver más” cuando existen más elementos relevantes que los mostrados. Dirige el enlace “Ver más” a una página útil y coherente con la información completa relacionada.
• En la versión responsiva orientada a dispositivos móviles los elementos del megamenú se muestran como opciones desplegables de navegación y se limitan a los elementos principales evitando interacciones complejas.

Incluye únicamente los accesos críticos en el menú móvil

• En el móvil el acceso al menú se realiza desde el icono hamburguesa
• Incluye solo los accesos de mayor criticidad fuera del menú y a su izquierda (p.ej. buscador o acceso a zonas privadas)

Identifica claramente el acceso a zonas privadas

• Utiliza el patrón "Acceder" cuando quieras incorporar un acceso a un espacio restringido. Incorpora los elementos de logado e instrucciones y ayuda para la creación de una cuenta.

• Utiliza el patrón "Mi cuenta" cuando te encuentres en un espacio restringido. Incorpora elemento de cierre y acceso a las secciones internas.

Incluye en la navegación auxiliar solo las opciones más relevantes

• Asegúrate que este menú solo incluye configuraciones de la página y elementos auxiliares que son relevantes en cualquier contenido del sitio. Mantén un orden lógico y agrupa los elementos que tienen relación.
• En la versión responsiva orientada a dispositivos móviles, incluye en el menú auxiliar solo aquellos elementos críticos (p.ej. cambios de idioma y otras configuraciones). Si no es necesaria, oculta la navegación auxiliar en dispositivos móviles

Componentes relacionados

Formado por: 

• Marca
• Enlaces
• Listados de enlaces

Recursos asociados al componente

Implementación:

Storybook (solo accesible desde la RCJA)

Control de versiones