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

Vertical menu

Lateral navigation allows users to navigate to parts of the page on which they are located. It can have up to 5 levels of depth.

Preview

Figma
Vertical menu preview

Uses

When to use

To present a set of navigation options to users and you have enough vertical space on the screen to display the full menu.

When not to use

If you do not have enough vertical space on the screen to display the full menu or if the navigation options are not relevant to the user.

Behaviour

Collapsible

The vertical menu can be configured as collapsible on those screens in which it is required due to the need to show the content of the page at 100% of the width. It will be used in resolutions of size XL.

Open button

An opening button will be displayed that will have an absolute position with respect to the main container. It will be displayed on the left side of the screen at a distance of 8px.

Display of behavior of the button opened by default
Default
Display the behavior of the open button in hover state
Hover
Viewing the behavior of the open button with focus
Focus
Display of Pressed Open Button Behavior
Pressed

Type

Graphical representation of a single-level element without drop-down elements
Simple: It is used when you do not have levels below in the hierarchy.
Graphical representation of a level element with drop-down elements
Drop-down: It is used when you have levels below in the hierarchy.

State

Display of a default menu item
Default
Viewing an Open Menu Item
Open
Display of a menu item in hover state
Hover
Displaying a Menu Item with Focus
Focus
Display of a pressed menu item
Pressed
Display of a selected menu item
Selected
Display of an open and selected menu item
Open Selected
Viewing a disabled menu item
Disable

Responsive

Menu display in collapsed mobile
Mobile
Viewing the list of menu items in mobile
List 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 open/close menu button has aria-expanded set to false when shrunk, while when expanded set to true. The item that serves as a menu has role="menu". The items contained in the menu are children items and have role="menuitem". Elements with role="menuitem" have the aria-posinset attribute, which defines the number or position of an element in the current set of listitems when not all elements are present in the DOM. Elements with role="menuitem" have the aria-level attribute that defines the element's hierarchical level within the menu structure. Each menu item has tabindex=0 and aria-hidden set to false when they are visible.
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.