Menú vertical

Componentes

Menú vertical

La navegación lateral permite a los usuarios navegar a partes de la página en la que se encuentra. Podrá tener hasta 5 niveles de profundidad.

Vista Previa

Figma

Usos

Cuándo usar

Para presentar un conjunto de opciones de navegación a los usuarios y tienes suficiente espacio vertical en la pantalla para mostrar el menú completo.

Cuándo no usar

Si no tienes suficiente espacio vertical en la pantalla para mostrar el menú completo o si las opciones de navegación no son relevantes para el usuario.

Comportamiento

Colapsable

El menú vertical podrá configurarse como colapsable en aquellas pantallas en las que se requiera por necesidad de mostrar el contenido de la página al 100% del ancho. Se utilizará en resoluciones de tamaño XL.

Botón Abrir

Se mostrará un botón de apertura que tendrá una posición absoluta respecto al contenedor principal. Se mostrará en la parte izquierda de la pantalla a una distancia de 8px.

Visualización de comportamiento del botón abierto por defecto

Default

Hover

Visualización del comportamiento del botón abierto con foco

Focus

Visualización del comportamiento de botón abierto presionado

Pressed

Tipo

Representación gráfica de un elemento de nivel simple sin elementos desplegables

Simple: Se utiliza cuando no tenga niveles por debajo en la jerarquía.

Representación gráfica de un elemento de nivel con elementos desplegables

Desplegable: Se utiliza cuando tiene niveles por debajo en la jerarquía.

Estado

Default

Open

Hover

Focus

Pressed

Selected

Open Selected

Disable

Responsive

Mobile

List Mobile

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El botón de apertura y cierre del menú tiene aria-expanded establecida en false cuando esta contraído, mientras que cuando se expande se establece en true.

El elemento que sirve como menú tiene rol="menu".

Los elementos contenidos en el menú son elementos hijos y tienen role="menuitem".

Los elementos con role="menuitem" tienen el atributo aria-posinset, que define el número o la posición de un elemento en el conjunto actual de listitems cuando no todos los elementos están presentes en el DOM.

Los elementos con role="menuitem" tienen el atributo aria-level que define el nivel jerárquico del elemento dentro de la estructura del menu.

Cada elemento del menú tiene tabindex=0 y aria-hidden establecida en false cuando son visible.