Ready

Dropdown Button

Dropdown buttons display a list of choices when clicked. It is a two step process that provides greater specificity to a singular action.

Ready

Dropdown Button

Dropdown buttons display a list of choices when clicked. It is a two step process that provides greater specificity to a singular action.

Anatomy

  1. Button

  2. Picklist

States

  1. Default

  2. Hover

  3. Pressed

  4. Disabled

Best Practices

1

Long Dropdowns

Avoid dropdowns when there are more than 10 or fewer than 5 options. Long of dropdowns will require scrolling and will not allow users to see all choices. See Fitt’s Law. Too few options in a dropdown could be better suited for a different treatment to get to context more quickly (button, button group, toggle).

Do

Don't

2

Choice Visibility

Keep dropdown button choices in view even if disabled.¹  If disabled items are removed, the interface loses consistency and hinders the learning curve for the user.

Do

Don't

3

Button Group with Dropdown

Use a button group with a dropdown button when you want to group a default action with several variations of that same action.

Do

Don't

Content

1

Short

Keep the button label short. It should clearly indicate the purpose of the selection and what they will find in the menu. The button label should be a verb or verb phrase.

2

Sentence case

Use sentence case.

3

Contruction

Dropdown menu items should be short and written using parallel construction. For example, every item should be a noun or a verb. Avoid repeating words if possible.

Do

Create campaign

Don't

Campaigns

4

Order

Options should be ordered in a logical manner, such as by frequency-of-use, or alphabetically as a fallback. Group similar options together to make them easier to scan.

Do

Don't

© 2026 Basis Technologies
© 2026 Basis Technologies
© 2026 Basis Technologies