Government of Spain Logo DINTEL Design System Logo Standardized Design of Electronic Procedures Home First steps First steps What is DINTEL? Designers Developers Resources Frequently Asked Questions Foundations Foundations Color Typography Box shadow Spacing Grid Border Border radius Iconography Illustrations Animations Accessibility Design tokens Writing guidelines Data visualization Interface elements Interface elements Modules Templates Components Updates Contact
Interface elements Components Horizontal Menu

Horizontal menu

Displays navigation elements in a horizontal menu.

Preview

Preview of horizontal menu component

Uses

Helps users navigate through pages and quickly find a nested sub-page without loading each page as they navigate to the final destination page.

How to use

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

How not to use

In any location other than the header.

Behaviour

States

Visualization of horizontal menu component without content

Without content

Visualization of horizontal menu component with content

With content

Status of actions

Visualization of horizontal menu component in default state

Default

Visualization of horizontal menu component in hover state

Hover

Visualization of horizontal menu component in focus state

Focus

Visualization of horizontal menu component in pressed state

Pressed

Visualization of horizontal menu component in selected state

Select

Visualization of horizontal menu component in disabled state

Disabled

Responsive

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

Visualization of horizontal menu component for mobile

Mobile

Accessibility

This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.

The horizontal menu is managed as a navbar containing a list of unnumbered items. A menu is a container of elements representing options. The element that serves as a menu has role="menubar". The items contained in a menu are child items of the containing menubar and have role="menuitem". These elements can be of two types, on the one hand, links and on the other hand, drop-down menus. A main menu item has aria-expanded set to false when its submenu is not visible and true when the submenu is visible. Each menu item has tabindex=0.

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

 NextGenerationEU European Union Funding Logo Transformation and Resiliency Recovery Plan Logo Spain digital logo Legal notice Accessibility Cookies policy Contact Sitemap