Skip to main content

Components

Dropdown

allows a user to choose one action from a collection of actions

banner-Dropdown

Anatomy

Dropdown are typically used when you have more than 3 items to choose from with flexile trigger object component. They’re used for navigation or command menus, where an action is initiated based on the selection. Dropdown allows for complex functionality menu items that can’t be accomplished with Select.

dropdown guideline
  1. Trigger : Object component (Button, List, Avatar, Etc) as a trigger to open the container item
  2. Container Item : Modals or body of list item option .
  3. Item Option : The item should always have a label that clearly to describes the action or option that it represents.

Usage

Dropdown presents a list of menu items that a user can choose to perform an action with. This component includes a menu trigger (a button, avatar or other component) and a menu items that are shown upon actioning the trigger. A menu item can be used to perform an action, a page navigation or show a sub menu. Each menu item can only perform a single action and please do not add additional actionable elements inside a menu item, they will not be keyboard accessible.

Common places dropdown appear : Navigation bar, filter, etc

When to use

  • Displaying a list of actions, options, or links. Usually displays 3 or more options
  • Allowing complex functionality that a select component can't accomplish
  • Taking immediate action or navigating users to another view

When not to use

  • When there are less than 8 items in the list, and there is space to display all options. Consider group of radio or checkbox instead.
  • When it is desirable to filter a long list of options.
  • Displaying a list of actions or options using the browser's native select functionality. Use select component instead.

Accessibility

When the user is focused on a menu trigger, the following keyboard interactions apply. Enter and space open the menu and select the current menu item, up and down arrows move the user between the menu items and disabled menu items, separators, and group labels are never focused.

Alt text

Do

Consistent item option with icon indicator when external links

Alt text

Don't

Inconsistent item option with icon and description

Content

When creating Dropdown :

  • People navigate menus and choose menu items based on their labels, so it’s important that they’re accurate and informative.
  • In general, use sentence case and write concise labels that clearly indicate the purpose of the selection.
  • For action menu items, use verbs and verb phrases to describe the action that occurs when the item is chosen. For example, “Move”, “Log time”, or “Hide epic labels”.
  • In most cases, links should be nouns. For example, Profile or Keyboard shortcuts.
  • Exclude articles in menu items. For example, use “Add flag” instead of “Add a flag”.
  • Keep menu items to a single line of text.