Índice de páginas
Menú horizontal
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.
Índice de apartados de esta página
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é 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.