Índice de páginas
Menú vertical
Se compone de un listado de elementos anidados que poseerán los enlaces a cada una de las secciones del sitio web en concreto. El número de páginas que puede contener es mayor que en el menú horizontal, ya que no está limitado en espacio. Podría compararse a un índice.
Índice de apartados de esta página
Tipos de menú vertical #
-
1
Por defecto
-
2
Nav
- 1 Por defecto. Listado de elementos con apariencia de link cuando el usuario hace hover con el cursor.
- 2 Nav. Listado de elementos que resaltan con un contenedor azul cuando el usuario hace hover con el cursor. Se utiliza como componente de navegación local.
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 pestaña.
- La lista de items debe alinearse a la izquierda, y puede ser organizada mediante separadores o subitems.
- Al encontrarse dentro de la página enlazada por el item, éste debería marcarse como activo.
- Los items pueden contener texto descriptivo.