Please note : This page is under construction. Additional content, including visuals, code snippets, and layout information, will be available soon.

Overview


A Dropdown is a clickable selection element that displays multiple related action options. Dropdowns qualify as both a Component and a type of menu; they act as a way of organizing choices or controls together to streamline selection and display possible options or inputs.

Dropdowns do not always contain direct actions; they can be used to set parameters or to change aspects of an element such as setting the layer for a GameObject or changing view-modes. In such circumstances the dropdown contains other components or interface elements related to the parent, operating as both an organization structure and a utility.

Dropdown Menu

The term “Dropdown Menu” refers to the component menu nested in a dropdown’s body which displays multiple related actions within the single element: Dropdown menus display a collection of action choices or components in an organized structure, helping save on interface real estate. The available actions in a dropdown menu should never overlap; each option should hold unique action choice(s) which either initiates a specific action or cascades into a group of more-specific action sub-choices related to the initial prompt.

Heuristics

Clear. A Dropdown’s purpose and function should always be front-loaded.

Cohesive. Contents of a dropdown should always be directly related to each other.

Specialized. Contents of a dropdown should always be directly related to the label category.



General Guidelines

Dropdowns must always display their contents attached to their trigger element; they must clearly indicate their element of origin and may not appear over the trigger element or label so as not to obscure context.

Dropdown labels must always clearly communicate the nature and context of their contents: Dropdowns should always contain an Expander glyph to the right of their label which indicates the nature of the element.



Related Elements

Popup

Popups are visually similar to dropdowns, although they differ in behavior and layout: Unlike a dropdown, a popup displays the current active selection (or selections) when closed. Popups are also limited to choice-selection actions and cannot contain other components or menus.


Foldout

Foldouts are display elements which allow users to stow multiple controls under a compact heading. They function similarly to dropdown menus, displaying interfaces when opened, however they remain open until intentionally closed. Foldouts are most often used to contain multiple groupings of elements, each with unique subcontexts relating to portions of a greater concept, as seen in GameObject Components in the Inspector.

Usage Guidelines

Dropdowns act as a means of discretely stowing selections or interfaces into a single component. A dropdown can be used to assign a choice from a list or to open a component menu. These elements help condense the interface, providing relevant information or choices when prompted.

Dropdowns often appear in situations where real estate is key, allowing menus to be stowed neatly under the component without requiring a detached label to provide context.


Types

Single-Action

Single-Selection Dropdowns are used for single actions in the interface. While they can contain complex paths to a selection the user eventually selects a single action to be performed (as seen in the Mesh Renderer Dropdowns).

Multi-Action

As the name implies, Multi-Action dropdowns allow a user to perform multiple actions: this can include making multiple selections as seen in a Filter Dropdown, or setting complex parameters like with Menu Dropdowns. In these situations a user is able to perform multiple related tasks within the same element, helping the interface stay organized and keeping the workflow optimized.

Menu Dropdown

Menu dropdowns help organize large quantities of actions into unique components, condensing interfaces down into single elements until their contents are needed. These elements provide a means of nesting related controls, giving the user access to actions or options that share a greater context. An example can be seen in the Camera dropdown of the Scene view, where a variety of related controls are grouped together, each relating to a unique aspect of the camera.

These elements often remain open once the user navigates away from them and can contain complex content like menus. They can also contain submenus, as seen in the Hierarchy’s “Create” Dropdown.

Filter

Filter Dropdowns contain items that can be enabled or disabled to affect the environment or scene. These elements allow for the aggregation of multiple toggles for the user that may be enabled or disabled together to achieve the goal.

Some filter dropdowns may allow multiple actions to be performed before closing, as seen with the toggling of layers in the Layers dropdown in the Main Toolbar. Other filter dropdowns can allow a single selection to be made while remaining open, as seen in the enabling / disabling of views in the View-mode Dropdown of the Scene window. The purpose of this is to allow users to see the results of their selection without having to navigate back to the available choices.


Tab Dropdown

These dropdowns only exist in panels to the far right of a tab, allowing the user tab-specific actions such as adding a tab to the panel or enabling debug mode. These dropdowns deviate from the standard appearance, being nested under a menu glyph, and their content varies depending on their tab’s purpose and the panel’s contents.


Style Guidelines

Dropdowns should be immediately readable, containing a glyph which denotes the nature of the element clearly.


Anatomy

Dropdowns are made up of the trigger element, the Dropdown body, and the content.

Trigger Element

The Trigger Element is the portion of the Dropdown which is displayed in its default state; it is the unopened Dropdown and acts as the header once the element is opened. The trigger functions as the primary point of interaction for a Dropdown and acts as the live area for opening the element.

Some Dropdowns are labeled on their Trigger Element while others contain a label to the left in the widow, however all Trigger Elements contain an Expander glyph.


Body

The body of a Dropdown can vary widely depending on its function and the nature of its contents. Generally 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.


States

Dropdowns hide and show content on activation and have five primary states.


Closed

When closed a dropdown only displays the top label; either the dropdown type or the current selection (depending on the dropdown’s purpose).


Hover

Dropdowns display tooltips after a short duration when hovered above.

Focused

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.


Open

Open dropdowns display their contents as an organized list of items for the user to choose from. All the relevant action items in the dropdown need to be displayed, even if they cannot currently be enabled by the user.

Most open dropdowns will close automatically when the desired action is performed, for example once the user has selected an item. In the case of multi-selection the dropdown will remain open to allow the user to toggle other options without having to reopen the element.

All dropdowns will remain open until the user navigates away from it (clicking off it or onto another element), closing automatically once they do.
Items within an open dropdown have their own states depending on the type of dropdown and the elements therein.


Overflow

Some dropdowns contain more items than there is room to comfortably display, even with nesting into item groups. In these situations the inclusion of a scrollbar may be used to allow the inclusion of all top-level items on the same strata or a submenu may be used to compensate.

Code Guidelines

Dropdowns may contain a variety of content but all function in a similar manner. They present items and interfaces to the user on activation and stow their content when not in use.


Behavior

Opening

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.

Closing

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.

Overflowed

When a Dropdowns 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:


Interface Dropdowns

When an Interface Dropdown enters the overflow state it invokes a Scrollbar to allow navigation of the Dropdown’s content.

Menu Dropdowns

When a Menu Dropdown enters the overflow state the section of its content (which would otherwise be cut off) becomes nested into a new menu item and attached submenu.