Skip to content

Dropdowns

Dropdowns are toggleable, contextual overlays for displaying actions related to the content.

Usage ---

They consist of a dropdown toggle and an overlay containing the actions. The overlay is shown after clicking the dropdown toggle. Dropdown are available with text only or with text and icon.

Dropdown

When to use

  • When there is a need for actions, which are related to each other (e.g. Export: PDF, Excel, Word, ...).
  • When users need to make a choice among a list of mutually exclusive options.

Best practices

  • Minimal button width is 100px.
  • Menu container should be at least the same width as the button.

Design ---

Elements

Dropdown - active

  1. Placeholder text, 2. Arrow, 3. Container, 4. menu container, 5. Icon (optional)

Variants

Dropdown alternatives - text

Interaction states are identical to the normal buttons.

Code ---

Dropdown menu

If the overlay should show a contextual menu, please use the menu component. It already implements specific keyboard interactions and aria roles that are needed for a dropdown menu.

This chapter describes how to create an interactive contextual overlay using the CDK Overlay module and the CDK Focus trap without special keyboard handling and aria-roles.

The example uses the markup of Bootstrap dropdown. It is also possible to use the CDK directives without using markup related to the dropdown-menu.

The overlay is toggled by the open property which needs to be updated properly. We added a transparent backdrop to the overlay so that we can listen for (backdropClick) which should close the overlay. The listener for (detach) is necessary for updating the open property after escape was pressed. In a real world scenario, one has to be careful here, because (detach) is always called when the overlay is closed.

For having a proper keyboard interaction, we are using the CDK Focus trap. It ensures that the focus will remain within the overlay while it is open. Enabling [cdkTrapFocusAutoCapture]="true" ensures, that the focus will be moved into the overlay on creation and returned to the trigger when the overlay is closed.