A dropdown is a clickable element of either an OS Menu or a VisualElement menu that displays multiple related action options or settings. Dropdowns qualify as both a component and interface; they act as a way of organizing choices and/or controls together to condense menus into a discrete element, displaying possible options or inputs when activated.
Besides containing direct actions, dropdowns can be used to set parameters or to change aspects of an element such as view mode. In such circumstances the dropdown contains other components or interface elements related to the parent, operating as both an organizing structure and a utility.
A dropdown field is a field with a button that, when clicked, opens a container that will be an OS Menu or a VisualElement menu. It is divided into areas for interactions or a list of choices, presenting the user with its contents only while the element is active.
These are common dropdown menu options.
These are custom dropdown menu options that apply to a specific area in Unity.
When to use
Use the APIs below to instantiate a dropdown button and its menu with an OS Menu or a VisualElement (Custom) menu.
Dropdowns are used to present users with two or more related options from a set menu. Dropdowns are used for making selections and commands, where the selection or action is initiated based on the selection.
Use DropdownField if you do not want to define certain list items in the code but want to allow these to be adjusted later.
Use EnumField if you know what type or category you want to define in the code to prevent this from being changed later.
Dropdowns can be recognized by their expander glyph and on-element label, providing a clear point of interaction and purpose. Although these elements may appear similar to other components at first look, their construction and the way they display their contents is distinct
Dropdown menus are positioned below their button with 1 px overlap, most commonly in Window Toolbars.
When used in vertically tighter layouts, dropdown menus open on top of the dropdown with the checked option aligning with the dropdown position.
Dropdowns only open on activation, not on hover. A dropdown’s content opens below its label (unless space is unavailable for it to do) and appears as a connected container listing available items.
Once opened a dropdown will remain open until the user has made a selection or has navigated away from the element.
Dropdowns automatically close once a user has made a selection (for single-selection dropdowns), clicks on the element action trigger again, or navigates away from the element.
When a dropdown contains more items than there is room to comfortably display the dropdown will enter into a state of “overflow”. How the overflow is displayed depends on the type of dropdown:
Dropdowns are made up of a button (interaction element), text label, and the dropdown menu (body).
1. Dropdown button (Interaction Element)
The interaction element consists of the live area of a dropdown when displayed in its default state; it is the unopened dropdown which functions as a header once the element is opened.
The interaction element on dropdowns can be identified by the expander glyph to the right of its label, signifying that the element contains a second level of interaction within the immediate context. This volume acts as the primary point of interaction for a dropdown and will continue to display its label after opening.
A dropdown’s label appears on the trigger element and can consist of an icon, a text string, or both. A dropdown’s label must always clearly indicate the nature of the dropdown in as few words as possible, providing immediate context to its contents.
Labels should observe standard element-captilazation practices. Avoid ambiguous labels and acronyms whenever possible; labels should build from the interface’s context when possible.
3. Menu (body)
The body of a dropdown can vary widely depending on its function and the nature of its contents. The body is divided into areas for interactions or a list of choices, presenting the user with its contents only while the element is active.
Once a selection is made or the user navigates away from the element the body will be closed and stowed.
The layout of a dropdown’s contents reflects its purpose. If the dropdown is limited to choice selections its layout will be fairly simple. However, dropdowns with complex menus often require further structuring.
Dropdowns hide and show content on activation and have five primary states.
Default (inactive) state.
Mouse over on Dropdowns display tooltips after a short duration when hovered above.
Dropdowns that are being focused on follow the standard focus behavior; The element is highlighted with a blue border, with contents highlighting as each item is navigated to.
When the cursor is over the Focused dropdown element.