Dropdowns (Selects)

Print
Related Pages

Overview

Dropdown menus are common form controls that allow users to select a single item from a list of options.

Textbox module not selected or not found. Textbox module not selected or not found.

How to Use

When to Use

  • You have 15 or more items in a list of options and you have limited space to display all of the options.
  • For mobile devices, it is acceptable to open the menu options in the native display for the mobile device, OS, and browser.

When to Consider Something Else

  • Users need to select any number of options from a list. Checkboxes are appropriate in these cases.
  • The list of options is very long – 30 or more. Text inputs may be a better alternative for users in these cases.
  • You need to display primary navigation within the site.

Other Guidance

Options Text: Be concise – no more than 30 characters. Note that the native display for the menu may truncate the text on smaller mobile devices.

Standard Width: Unless a specific width is specified for a dropdown menu, it will automatically fit to the width of the longest option in the menu. This can be problematic when the options text is very long, especially for display in Viewport 1.

Textbox module not selected or not found. Textbox module not selected or not found.

Fixed Width: A fixed width may be specified for dropdowns. This approach best fits the dropdown to the width of the container in which it is placed. However, this may truncate the options text if it is wider than the set width. This behavior will vary by mobile device, OS, and browser.

Textbox module not selected or not found. Textbox module not selected or not found.

References