Skip to main content

Dropdown

An overlay list of options, which are hidden by default but can be shown by interacting with a button or other component.

OverviewReactSwiftKotlin

Usage​

  • Used mainly as navigation or command menus, and typically when you have 2 to 12 items to choose from.
  • It differs from a Select in that it shows actions or navigation options and is not a form input.
  • The element that triggers the Dropdown can be everything but it’s recommended to use a Button or IconButton.

Icon​

An Icon can be added to convey more meaning and even add color to it.

Do’s & Don’ts​

Use sentence case and write concise labels that clearly indicate the purpose of the selection.
Labels should not wrap to multiple lines. Always consider shortening the text.