Horizontal menu

Components

Horizontal menu

Display navigation elements in a horizontal menu.

Preview

Figma

Uses

It helps users navigate through pages and quickly find a nested secondary page without loading each page as they navigate to the final destination page.

When to use

The main navigation component is intended to be used as the main means of navigation. We put it at the top next to the header.

When not to use

In any location other than the header.

Behaviour

States

No content

With content

Status of the shares

Default

Hover

Focus

Pressed

Select

Disabled

Responsive

For the XS and SM media queries, the Horizontal menu will be displayed on a different screen.

Mobile

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The horizontal menu is managed as a navbar containing a list of unnumbered items.

A menu is a container of items that represent options. The item that serves as a menu has a role="menubar".

The elements contained in a menu are children elements of the menubar that contains them and have role="menuitem". These elements can be of two types, on the one hand, links and on the other drop-down menu.

A main menu item has aria-expanded set to false when its submenu is not visible and to true when the submenu is visible.

Each menu item has tabindex=0.