Componentes Índice de páginas
Listado de enlaces
Navegación
Se trata de un listado de items apilados que, dotado de protagonismo dentro de la página, enlaza a las distintas secciones del sitio o aplicación web.
Índice de apartados de esta página
Anatomía #
Pueden apilarse de 3 a 7 items, y cada uno de ellos se compone de varios elementos:
-
Título del item
Descripción
-
Título deshabilitado
-
Título sin referencia
-
Título activo con chevron
- Título del item: Enlace a la sección indicada. El estilo puede ser el que se muestra por defecto, deshabilitado, sin enlace o activo.
- Descripción: Opcionalmente, se puede añadir un breve texto que informe al usuario de lo que se va a encontrar en su interior.
- Icono junto al título: Opcionalmente, se puede incluir un icono que apoye visualmente el contenido de cada enlace.
- Icono derecha: Icono situado a la derecha que también sirve como botón de enlace. Según la variable puede ser una flecha, un chevron o un SVG personalizado.
Variantes #
Con líneas separadoras #
El estilo por defecto del listado. Se utiliza para apilar de manera ordenada y sobria múltiples secciones.
Con contenedores #
Rodeados por un perímetro rectangular con esquinas redondeadas, se utiliza para dotar de mayor presencia e importancia a cada uno de los items del listado cuando el número de los mismos no es muy elevado.
Con contenedores y hover #
Utiliza la clase .c-link--full
definida en los estilos de enlaces para que todo el contenedor sea clicable.
Accesibilidad #
Cómo funciona #
- Rodeado con la etiqueta
<nav>
, debe tener unaria-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 unid
único. - Si incluyes
svg
personalizados, asegúrate de que tienen los atributosrole=presentation
yaria-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 de cada item | Permite crear un id concreto para cada item. |
aria-label |
Dentro del parámetro Nunjuks attributes |
Describe el tipo de navegación. |
title |
Parametro Nunjucks dentro de attributes cuando se usa un target en el item. |
Anuncia que el enlace se abrirá en una nueva ventana o pestaña. |