Deployable

Components

Deployable

A drop-down menu displays a list of options from which the user can select one or several depending on their type.

Preview

Figma

Uses

When to use

When we need to show a list of actions or links.

When not to use

When we need a form element (better use select).

When we want to select multiple options

Good practices

Several elements can be deployed.

Avoid texts that occupy more than one line.

Use icons when there is an added value in the use of the icon and not only for illustrative purposes.

Sort the options in a logical order by placing the most selected option at the top, if we know it.

For action options use verbs that describe the action, for example “Move”, Hide layers”.

In most cases, the links should be substantive, for example “Profile”.

In cases of having actions disabled, we must show them as they help the user to know that they exist in the appropriate conditions.

Behaviour

States

Default

Hover

Focus

Pressed

Select

Disabled

Types of selection

Display the drop-down component with a selection

Unique selection

Unique selection + icon

Multiple selection

Sizes of button

By default

Compact

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 element that displays and hides the content has role="button".

When the content is visible, the element with role="button" has aria-expanded set to true. When the content area is hidden, it has the value false.

The element with role="button" has a value specified for aria-controls that refers to the element that contains all the content that is displayed or hidden.

The element with role="button" has tabindex="0" to make it possible to access it using the tab key or move the focus by programming.

The element with role="button" has the aria-haspopup="menu" attribute that indicates availability and the type of interactive pop-up element that can be activated.

The dropdown has the aria-activedescendant property to identify the currently active element when the focus is on the dropdown.

Each dropdown item has role=”menuitem”.

Each dropdown item has tabindex=”0” to access it.

Each item in the dropdown has the aria-disabled property to know if it is disabled.

Each item in the dropdown has the aria-current property to know if it is selected.