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

## Componentes Índice de páginas

Componentes

# Menú horizontal

Navegación

El menú horizontal está compuesto por una serie de elementos que enlazan con cada una de las secciones principales del sitio web. Se trata de una forma sencilla de organizar el contenido y facilitar su acceso.

## Índice de apartados de esta página

-   [Variantes](#variantes)
-   [Accesibilidad](#accesibilidad)
-   [Buenas prácticas](#buenas-prcticas)

## Variantes [#](#variantes)

### Por defecto

### Con aspecto de enlaces

### Con aspecto de menú de navegación

### Con aspecto de pestaña e iconos

## 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 enlace marcado con un `id` único.
-   Si incluyes `svg` personalizados, asegúrate de que tienen los atributos `role=presentation` y `aria-hidden=true`.

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

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

-   Los diferentes items deben estar lógicamente relacionadas pero ser mutuamente excluyentes. No hay más de un contenido por item.
-   Utilizar pestañas cuando haya una gran cantidad de contenido que pueda separarse en distintas secciones. Esto permite ver el contenido sin tener que navegar fuera de esa página.
-   Los grupos de pestañas pueden alinearse a la izquierda, al centro o a la derecha, según sea necesario.
-   Las etiquetas de las pestañas pueden incluir iconos y texto. Las etiquetas de texto tienen que ser cortas.