Dropdown

A dropdown is triggered by the interaction with a button or other control. Once displayed, the action dropdown presents users with a list of actions they can perform. The list can be as simple as a few actions, or as complex as a three-section menu with headings and a search bar.

Usage guidelines

When to use

• To display several action items in a compact space.
• To presents users with additional options when space in a layout is limited.

When not to use

• With the purpose to input data in a form or to filter content in a page; use Dropdown instead.
• If certain actions are critical, place them on the page so that the user doesn't miss them.

Writing guidelines

• Length: Labels should be concise - keep them to a single line of text - and should clearly indicate what will occur after an option is selected.

• Capitalization and case: Write actions in sentence case.

Specifications

Anatomy

1. Container: can have rounded corners.
2. Search bar (optional)
3. Section (up to 3)
4. Section heading (optional)
5. Section item
6. Icon
7. Second section

Variants

Action dropdown can be customized in several ways:

• Display the search bar or hide it
• Display one, two or three section
• Within each section, hide or show any number of actions (max 5 per section), the section headings, and the icons.

You can optionally add an icon to the right to suggest, for example, that an items leads to sub-action items. It can also lead to a nested level of more actions, that will open to the right of the dropdown.

Size

Action dropdown can be resized horizontally to adapt to different design needs. Its height depends on the amount of content in the dropdown.

Styling

Default, Rounded and Nested

Action dropdown is available in three styling variants:

• Use the Default when the upper edge of the dropdown is in contact with the bottom edge of some other element (like a Navigation Header).
• Use Rounded when the dropdown is floating and not in contact with other element.
• Use Nested for second levels of dropdowns. It must be aligned on top with the parent element in the previous level.

Theme

Action dropdown is available both in light and dark theme.

An alternative color for Light theme is Zurich Blue background, in case you need more contrast between the background and the action dropdown. Its corresponding background color for a focused dropdown item is Mid Blue.

Behavior

Positioning and alignment

The placement of an action dropdown varies based on the element that triggers it, be that a button, avatar or other control.

In general, an action dropdown should open right below the control, or if the space below is not sufficient, above it.

An action dropdown is typically left or right-aligned to the control that generates the dropdown, with the direction determined by the space available in the interface.

Interaction

Trigger

Action dropdowns are triggered by a control, which means the control should suggest that, if clicking or hovering on it, further actions will appear

Hover/Press

Focused item

Pressing on an action will result in the user being led to another page or having effect on the current page.

Accessibility guidelines

Design considerations

Copy

• Make sure all the labels are accurate, consistent and informative.
• Sort items in an action dropdown in a logical order (e.g. most selected option at the top).
• If an action dropdown comprises several items, consider grouping related actions.

Keyboard Interaction

• Tab: to move focus
• Space / Enter: to activate

Related components

• Icon