# Menú de navegación. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Menú de navegación

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](#variantes)
-   [Accesibilidad](#accesibilidad)
-   [Diferencias entre componentes](#diferencias-entre-componentes)

## Variantes [#](#variantes)

### Por defecto

### Con estilos de botón transparente

### Con estilos de cabecera

## Accesibilidad [#](#accesibilidad)

### Cómo funciona [#](#cmo-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 `<button>` o enlace `<a>`. Cuando se trata de un desplegable con items debe tener los atributos `aria-expanded` y `aria-controls`.
-   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](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/ "Se abre en ventana nueva")

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 [#](#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

    Opción 1 Opción 2 Opción 3

2.  2

    ### Desplegable

    Desplegable

3.  3

    ### Listado en caja

    Listado en caja

    -   Opción 1
    -   Opción 2
    -   Opción 3
    -   Opción 4
    -   Opción 5

4.  4

    ### Menú de navegación

5.  5

    ### Barra de menús

    -   [Menuitem Con ítems seleccionados](#)
        -   Subitem 1
        -   Subitem 2
        -   Subitem 3
    -   [Menuitemcheckbox Con ítems seleccionados](#)
        -   Subitem 1
        -   Subitem 2
        -   Subitem 3
    -   [Menuitemradio Con ítems seleccionados](#)
        -   -   Radio 1
            -   Radio 2
            -   Radio 3
    -   [Mixed items Con ítems seleccionados](#)
        -   -   Tamaño mayor
            -   Tamaño menor

        -   -   Negritas
            -   Itálicas

        -   -   Ninguno
            -   Tachado
            -   Subrayado
    -   [Menuitem solo](#)

1.  1 [Selector.](componente-selector-codigo.html) Se usa específicamente en formularios, tienen una apariencia y tamaño alineado con los inputs.
2.  2 [Desplegable.](componente-dropdown-codigo.html) Es un componente que despliega un contenedor genérico en el que puede incluirse cualquier otro componente.
3.  3 [Listado en caja.](componente-listbox-codigo.html) Se usa para hacer un listado de opciones.
4.  4 [Menú de navegación.](componente-menu-navigation-codigo.html) Se usan específicamente para navegar en la aplicación, puede tener varias apariencias según el contexto.
5.  5 [Barra de menús.](componente-menubar-codigo.html) 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.