Dropdown

Dropdown is used to select an option, take action, and configure settings.

External resources
find_in_page Inspect in Figma
description Try it in Storybook
check_circle_outline

Fully implemented in LOGEX Framework.

Variants

There are two main variants: default and condensed. Where possible, use the default variant. The condensed variant is ideal to be used in places where the space is sparse, such as inside other components.

  1. Default size
  2. Condensed size

Anatomy

  1. Collapsed body
  2. Placeholder
  3. Dropdown arrow
  4. Dialog body
  5. Additional icon
  6. Search bar (optional)
  7. Item
  8. Separator
  9. Icon (optional)
  10. Sub-level arrow
  11. Sub-level dialog body
  12. Group header
  13. Scrollbar

Behaviour

The dropdown dialog can be opened from various components. For example from:

  1. collapsed dropdown,
  2. breadcrumb item,
  3. or an icon button…

The dropdown dialog opens according to the screen space. If there is not enough space or the height is limited by the design, the dialog content becomes scrollable.

Usage

Use consistent sizing between the collapsed dropdown and the dropdown dialog.

Don’t use different sizes between the collapsed dropdown and the dropdown dialog.

Something missing? Contact one of the designers.