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.

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

Anatomy

Anatomy

  1. Button

  2. Picklist

Variants

Variants

Variants

  1. Primary

  2. Secondary

  3. Transparent

  4. Heading

  5. Button Group with Dropdown

States

States

States

  1. Default

  2. Hover

  3. Pressed

  4. Disabled

Best Practices

Best Practices

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).

2. Visibility

Give the user context to the button when making a selection in the dropdown. Titles provide context and direction when they are choosing from a list. Whenever the labels are hidden or removed when the menu is open, users may not recall the origin of the selection.¹

3. 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.

4. 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.

Content

Beta

Content

Beta

Content

Beta

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.

Use sentence case--only capitalize the first word.

Create campaign

Campaigns

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.

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.

Create ad

  • Ad tag

  • HTML5

  • Image

  • Native

  • Audio

  • Video

Create a new ad

  • Upload ad tag

  • New HTML5 ad

  • Create image ad

  • Upload Native ad

  • Audio ad

  • Upload a new video ad

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies