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 Vertical Menu

Vertical menu

Side navigation allows users to navigate to parts of the page they are on. It can be up to 5 levels deep.

Preview

Preview of the vertical menu component

Uses

How 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.

How 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

Colapsable

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

Open button

An open 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 default open button behavior

Default

Visualization of the behavior of the open button in hover state

Hover

Visualization of the behavior of the open button with focus

Focus

Display of the behavior of an open button pressed

Pressed

Close button

The button will be integrated into the menu as the first option.

Display of default closed button behavior

Default

Visualization of closed button behavior in hover state

Hover

Display of closed button behavior with focus

Focus

Display of behavior of the closed button pressed

Pressed

Type

Display of a single level element without drop-down elements

Simple

Used when it has no levels below it in the hierarchy.

Display of a level element with drop-down elements

Dropdown

Used when it has levels below it in the hierarchy.

State

Display of a default menu item

Default

Display of an open menu item

Open

Displaying a menu item in hover state

Hover

Displaying a menu item in focus state

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

Display of a disabled menu item

Disable

Responsive

Menu display in collapsed mobile

Mobile

Display of the list of menu items on mobile

List 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 open and close menu button has aria-expanded set to false when contracted, while when expanded it is set to true. The element serving as menu has role="menu". The items contained in the menu are child items and have role="menuitem". Elements with role="menuitem" have the attribute aria-posinset, which defines the number or position of an element in the current set of listitems when not all elements are present in the DOM. Items with role="menuitem" have the attribute aria-level which defines the hierarchical level of the item within the menu structure. Each menu item has tabindex=0 and aria-hidden set to false when visible.

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