Menú horizontal

Componentes

Menú horizontal

Muestra elementos de navegación en un menú horizontal.

Vista Previa

Figma

Usos

Ayuda a los usuarios a navegar por las páginas y encontrar rápidamente una página secundaria anidada sin cargar cada página mientras navegan a la página de destino final.

Cuándo usar

El componente de navegación principal está destinado a ser utilizado como el medio principal de navegación. Lo colocamos en la parte superior junto al header.

Cuándo no usar

En cualquier otra ubicación que no sea el header.

Comportamiento

Estados

Sin contenido

Con contenido

Estado de las acciones

Visualización del componente menú horizontal en estado por defecto

Default

Hover

isualización del componente menú horizontal en estado enfocado

Focus

Visualización del componente menú horizontal en estado presionado

Pressed

Visualización del componente menú horizontal en estado seleccionado

Select

Visualización del componente menú horizontal en estado deshabilitado

Disabled

Responsive

Para los media queries XS y SM, el menú Horizontal se mostrará en una pantalla diferente.

Visualización del componente menú horizontal en móvil

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 horizontal menú es gestionado como una navbar que contiene una lista de elementos no numerados.

Un menú es un contenedor de elementos que representan opciones. El elemento que sirve como menú tiene rol="menubar".

Los elementos contenidos en un menú son elementos hijos del menubar que los contiene y tienen role="menuitem". Estos elemntos pueden ser de dos tipos, por un lado, enlaces y por otro menu desplegable.

Un elemento de menú principal tiene aria-expanded establecido en false cuando su menú secundario no es visible y en true cuando el menú secundario es visible.

Cada elemento del menú tiene tabindex=0.