DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Barra de menús

Mostrar y ocultar

Edita y genera cambios sobre otro elemento, pero no navega a un sitio diferente.

Índice de apartados de esta página

Variantes

Por defecto

Con estilos de botón transparente

Con estilos de cabecera

Accesibilidad

Cómo funciona

  • Lista sin orden <ul> con role=menubar y un aria-label que describe su función. Los <li> de su interior tienen un role=none y albergan un enlace <a> con el atributo role=menuitem. Cuando contienen un desplegable con otra lista <ul> de items, se añade aria-haspopup=true y aria-expanded.
  • La lista <ul> desplegable debe tener un role=menu y un aria-label que describa la acción. Sus items poseen un role=menuitem. En el caso de que tengan la función de checkbox o radio, sus atributos serán role=menuitemcheckbox o role=menuitemradio respectivamente, junto con aria-checked. También podemos agrupar estos items en listas anidadas con role=group y utilizar separadores con role=separator. Tanto el contenedor del componente como los items y subitems tienen id únicos.
  • 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 con las flechas de dirección.

Basado en el patrón 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 componente e items Permite crear un id concreto para cada item.
arialabel Parámetro Nunjucks dentro del componente e items Descibe el tipo de navegación.
role Parámetro Nunjucks dentro de items. Configura el comportamiento y atributos ARIA a partir de las variables group, separator, menuitem, menuitemcheckbox y menuitemradio

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.