DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de páginas

Menú de navegación

Se usan específicamente para navegar en la aplicación, puede tener varias apariencias según el contexto.

Índice de apartados de esta página

Variantes

Por defecto

Con estilos de botón transparente

Con estilos de cabecera

Accesibilidad

Cómo funciona

Rodeado con la etiqueta <button>, 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 <button> o enlace <a>. Cuando se trata de un desplegable con items debe tener los atributos aria-expanded y aria-controls. Además, la lista de subitems del desplegable debe llevar un aria-labelledby que apunta al id del item padre. Tanto el <nav> como los enlaces o <button> y sus respectivos subitems deben tener id únicos.

Al mostrar un item activo, se añade un aria-current=page. Cuando un item se encuentra deshabilitado necesita los atributos aria-disabled=true y tabindex=-1 para que no se pueda seleccionar.

Cuando un item toma el foco, la persona usuaria puede moverse entre el grupo tanto con el tabulador como con las flechas de dirección.

Basado en el patrón navigation menubar de W3C

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 item Permite crear un id concreto para cada item.
aria-label Dentro del parámetro Nunjucks attributes Descibe el tipo de navegación.
aria-labelledby Dentro del parámetro Nunjucks sub, en attributes Apunta al id del item padre para extender la información.
active: true Parámetro Nunjucks dentro del item actual Añade aria-current=page y le da estilos al botón.

Diferencias entre componentes

Existen varios componentes que tienen una apariencia y funcionamiento similar, aunque deben usarse uno u otro dependiendo de la finalidad y el contexto.

  1. 1

    Selector

  2. 2

    Desplegable

  3. 3

    Listado en caja

    • Opción 1
    • Opción 2
    • Opción 3
    • Opción 4
    • Opción 5
  4. 4
  5. 5

    Barra de menús

  1. 1 Selector. Se usa específicamente en formularios, tienen una apariencia y tamaño alineado con los inputs.
  2. 2 Desplegable. Es un componente que despliega un contenedor genérico en el que puede incluirse cualquier otro componente.
  3. 3 Listado en caja. Se usa para hacer un listado de opciones.
  4. 4 Menú de navegación. Se usan específicamente para navegar en la aplicación, puede tener varias apariencias según el contexto.
  5. 5 Barra de menús. Genera cambios en otro sitio de la página, pero no navega a otro sitio diferente. Se pueden seleccionar múltiples opciones y agruparlas de distintas maneras. Por ejemplo para filtros.