Logo Gobierno de España Logo DINTEL · Sistema de diseño Diseño Normalizado de Trámites Electrónicos Inicio Primeros pasos Primeros pasos ¿Qué es DINTEL? Diseñadores Desarrolladores Recursos Preguntas frecuentes Fundamentos Fundamentos Color Tipografía Elevaciones Espaciado Retícula Borde Radio Iconografía Ilustraciones Animación Accesibilidad Tokens de diseño Contenidos digitales Visualización de datos Elementos de interfaz Elementos de interfaz Módulos Plantillas Componentes Actualizaciones Contacto
Elementos de interfaz Componentes Menú vertical

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

Vista previa del componente menú vertical

Usos

Como 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.

Como 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

Visualización del comportamiento del botón abierto en estado hover

Hover

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

Focus

Visualización del comportamiento de botón abierto presionado

Pressed

Botón Cerrar

El botón aparecerá integrado en el menú siendo la primera opción.

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

Default

Visualización de comportamiento del botón cerrado en estado hover

Hover

Visualización de comportamiento del botón cerrado con foco

Focus

Visualización de comportamiento del botón cerrado 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

Visualización de un elemento de menu por defecto

Default

Visualización de un elemento de menu abierto

Open

Visualización de un elemento de menu en estado hover

Hover

Visualización de un elemento de menu con foco

Focus

Visualización de un elemento de menu presionado

Pressed

Visualización de un elemento de menu seleccionado

Selected

Visualización de un elemento de menu abierto y seleccionado

Open Selected

Visualización de un elemento de menu deshabilitado

Disable

Responsive

Visualización del menú en mobile colapsado

Mobile

Visualización del listado de items del menu en 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.

Este sitio web utiliza cookies propias y de terceros para ofrecer un mejor servicio. Si continúa navegando consideramos que acepta su uso.

 Logo de Financiación por la Unión Europea NextGenerationEU Logo de Plan de Recuperación Transformación y Resiliencia Logo España digital Aviso legal Accesibilidad Política de Cookies Contacto Mapa web