Government of Spain Dintel, Sistema de Diseño Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Horizontal menu

Horizontal menu

Display navigation elements in a horizontal menu.

Preview

Figma
preview horizontal menu

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

Display of the horizontal menu component without content
No content
Display of the horizontal menu component with content
With content

Status of the shares

Display of the horizontal menu component in default state
Default
Display of the horizontal menu component in hover state
Hover
isualization of the horizontal menu component in focused state
Focus
Display of the horizontal menu component in the pressed state
Pressed
Display of the horizontal menu component in selected state
Select
Display of the horizontal menu component in disabled state
Disabled

Responsive

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

Display of the horizontal menu component on mobile
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.
Funded by the European Union NextGenerationEU, opens in new tab Recovery Plan, Transformation and Resilience, opens in new tab Digital Spain, opens in new tab Support Accessibility Web Map Cookies Policy

This website uses its own and third-party cookies to offer a better service. If you continue browsing, we consider that you accept its use.