====== UI Patterns - Dropdowns ======

Author: Michelle

===== Dropdown Menu Anatomy =====
{{ :design:1_896kgcqfqm3uotygyjrszg.jpeg?nolink |}}
  - **Label**: Inform users on what should be selected.
  - **Field Icon (Optional)**: Supports the label by indicating the type of information required.
  - **Search Bar (Optional)**: Used to help users easily find their intended option — for menus that consist of 20 or more options.
  - **Checkbox (Optional)**: If multiple selections are enabled.

===== Dropdown Menu Types =====
Depending on the nature of the input required.

{{ :design:1_qljkvb4xxfhyytw1jvaf2q.jpeg?nolink |}}

===== Dropdown Menu States =====
Dropdown menus can have the following states: default, active, hover, disabled, focused, and error.

{{ :design:1_w73f0nkbi39kybh7hii7jw.jpeg?nolink |}}

===== Best Practices =====

==== Avoid Long Dropdowns ====
When there are more than 15 options, use a text field with autocomplete functionality.

{{ :design:1_bqvewydzp8qkncq_1yjilg.jpeg?nolink |}}

==== Too Few Options ====
When very few options, consider radio buttons, toggles, or checkboxes.

{{ :design:1_bggnkvkkt7cxgnjk1uq3ng.jpeg?nolink |}}

==== Grey Out Disabled Options ====
When there’s an option that is disabled or unavailable, it should be greyed out instead of removed

{{ :design:1_eum5kwxmdkb8zjt6wnbtza.jpeg?nolink |}}

==== Use Clear & Concise Labels ====
  * Use Sentence Case
  * For action menu items, use verbs to describe the action that will occur
  * For links, use nouns to identify the page that the user will be directed to
  * Exclude articles in menu items; use “delete page”, instead of “delete the page”
  * Keep menu items to a single line of text
  * Organize the menu items by sorting the list in a logical order - most selected option at the top, if known.