Dropdown

What is a Dropdown?

A Dropdown is a component that overlays a list of links or options for the user to choose over the page. They're usually opened from a Button. The options might navigate the user to another place or perform an action.

When, and why?

Dropdowns are most commonly used with a Button, but can be triggered from other components. When the triggering component is selected, an overlay (often a Card) will be shown with a list of items. Usually, these items navigate to another area of the application, or perform an action in context to the current page. Very common examples of Dropdowns are overflow menus.

Dropdown or a Select?

Dropdowns and Select components can appear to be very similar, and sometimes it is hard to chose the appropriate one. As a general rule of thumb, the component triggering the Dropdown doesn't change when an item is selected, e.g. if the trigger is a Button, then Button's label should not change. On the other hand, if you want the selection to be shown when the overlay is hidden, then you should use the Select component.

Read more on the Select page.

Dropdown types

The following Dropdown types are available. First, there are two types of Dropdown for alignment, and then you can choose a different type for each line item within the Dropdown overlay:

Dropdown positioning

Dropdowns can either be manually positioned, or use their default positioning:

Dropdown properties

Dropdowns contain multiple line items. Each line item is interactable and when clicked will perform some kind of action, much like a Button would. The exception to this is when they are a heading or divider, which are non-interactable visual elements to provide structure to the Dropdown overlay.

The following Dropdown properties are available:

Using a Dropdown

Alignment

Where the Dropdown opens in relation to the triggering component is an important consideration. The Dropdown should always be next to the component, but might need to open on a specific side to allow it to be easily interacted with. For example, if you have a Button on the right-hand side of the screen you would need the Dropdown to open below and to the left so it doesn't go off the screen.

Triggering component

Your triggering component should be accurately labelled to describe what is in the Dropdown list, and inform users what to expect.

Dropdown line items

Even though line items can have any content to best meet their needs, they should stick to the types outlined here. If there is a use case that differs, then speak to your UX Designer first.

Each line item should be short and concise, limited to a single line of text. If necessary, two lines and an ellipsis can be used for longer line items that do not need the whole text - for example, a "recent documents" Dropdown could truncate the document names if they are excessively long.

Display your options in alphabetical order, unless there is good reason to show in another order - for example, a "recent items" Dropdown could be shown in descending date order.

Icons

These can be positioned on the left or right of each list item. If every list item has an icon then they should be positioned to the left of the label. If you just want to emphasis one item using an icon (e.g. a delete item action), then the icon should be positioned to the right of the label. You should never have an icon on both the left and right of the label.

Icons should be used to help the user identify the item in the list quicker than reading every item - if it doesn't help the user, then they shouldn't be used. For example, having the same icon on every list item will actually hinder the user in finding what they need. Find out more in the Iconography guidelines

Dropdowns on mobile

Dropdowns on mobile work very similarly to *Dropdowns on desktop by showing a list of selectable line items, but they appear slightly different. Tap targets are important on mobile: they are the name for the section of the screen that is interactable. The mobile version of a Dropdown occupy the full width of the device's screen to make a bigger target and slide up from the bottom of the screen.

Live demo

Below, you can find a live demo for an Dropdown component. Use the drop-down menus and radio buttons to view the different Dropdown Types and Variants.

Component accessibility

This component has been built to meet the current WCAG AA 2.1 guidelines. We also test these components against the guidelines before release.

Aria tags

Every component in Mosaic requires an appropriate Aria tag to ensure that screen readers can effectively parse the page. Aria tags are provided as part of Mosaic. Please do not override these without good reason.

Ensure that Aria tags are used as appropriate signposts throughout the product.

Colour Combinations

When designing with a Dropdown, you should be mindful of the colour combinations you are using. The components have been designed with this in mind, but if you are using colours that are not part of the default component, please ensure that there is a clear colour contrast within the parts of the component and between the Alert and the background it is on. To check the contrast, please use WebAIM's contrast checker.

Focus state

A Dropdown needs to have a focus state - a focus state is when you tab into an element to interact with it. Ensure that users can use their keyboard to focus on the Dropdown and the elements within it.

Icons

An icon needs to have underlying code that describes what action the icon takes. the labels should be specific - for example, a 'bin' icon for delete should be labelled 'delete' not 'bin'.

Key Binding

A Dropdown needs to be able to be interacted with via a keyboard. Where possible we will provide key-binds within our Mosaic component or there will be default HTML ones. If this isn't the case then please implement logical key-binds for all intractable components.

Movement/Animation

Please refer to the WCAG guidelines for the time-based considerations for animations.