Dropdown

Dropdowns display a list of actions in a menu that opens and closes. We use dropdowns most commonly to trigger an action or to redirect the user to a new page or modal.
Demo and Developer GuidelinesFigma Component

Anatomy

We use dropdowns in the same way we use buttons; the only difference is that a dropdown has multiple nested actions a user can choose from. For all dropdowns except the overflow dropdown, the button itself includes a chevron icon to indicate that there is a menu the can be expanded.

Action Icon

Only use an icon on list pages for the primary action on the page. Do not use an icon in form dropdowns.

Label

Dropdown labels are title case. They clearly define what happens when a user selects the dropdown with a present tense, singular verb that appears in the Button Glossary.

Option labels consist of a single singular noun unless otherwise stated.

Dropdown Label character count limit: 20

Option character count limit: 30

Types

Primary

Primary dropdowns are reserved for when you have multiple main items you can create from a page. There can only be one primary dropdown per page.
Default
Active
Example

Secondary

Secondary dropdowns can appear on any page in Procore. They display a list of similar, non-primary actions that users can take with the same verb. There are some cases when a secondary dropdown menu can present a list of items not associated with a verb. For example, Reports > Report Name.

Labels for this dropdown consist of one singular, present-tense verb that appears in the Button Glossary. In the menu, only list the names of the items that you can take that action upon.
Default
Active
Example

Overflow

The overflow dropdown is used to provide selectible actions in an area with limited space. We use these primarily in forms, tables, and banners.

Option lables under the overflow dropdown consist of a combination of a singular, present tense verb found in the Button Glossary, the name of the item, or a label that directs the user to a reference link (often under a Learn More label).
Default
Active
Example

States


Dropdown states (hover, disabled etc) use the same state styling as Buttons.

Specifications