Menú horizontal

Navegación

El menú horizontal está compuesto por una serie de elementos que enlazan con cada una de las secciones principales del sitio web. Se trata de una forma sencilla de organizar el contenido y facilitar su acceso.

Variantes
Accesibilidad
Buenas prácticas

Variantes #

Por defecto

Con aspecto de enlaces

Con aspecto de menú de navegación

Con aspecto de pestaña e iconos

Accesibilidad #

Cómo funciona #

Rodeado con la etiqueta <nav>, debe tener un aria-label que describa el tipo de navegación.
Dentro se encuentra una lista sin orden <ul> con una serie de <li> que contienen un enlace marcado con un id único.
Si incluyes svg personalizados, asegúrate de que tienen los atributos role=presentation y aria-hidden=true.

Qué tener en cuenta
Qué usar	Dónde	Función
`idPrefix`	Parámetro Nunjucks dentro del componente	Permite crear `id` únicos para los items del listado
`id`	Parámetro Nunjucks dentro del componente	Permite crear un `id` concreto para cada item.
`aria-label`	Dentro del parámetro Nunjucks `attributes`	Descibe el tipo de navegación.
`title`	Dentro del parámetro Nunjucks `attributes` cuando se usa un `target` en el item.	Anuncia que el enlace se abrirá en una nueva ventana o pestaña.

Buenas prácticas #

Los diferentes items deben estar lógicamente relacionadas pero ser mutuamente excluyentes. No hay más de un contenido por item.
Utilizar pestañas cuando haya una gran cantidad de contenido que pueda separarse en distintas secciones. Esto permite ver el contenido sin tener que navegar fuera de esa página.
Los grupos de pestañas pueden alinearse a la izquierda, al centro o a la derecha, según sea necesario.
Las etiquetas de las pestañas pueden incluir iconos y texto. Las etiquetas de texto tienen que ser cortas.