Dropdown

The dropdown is typically represented by a field or button that, when clicked or hovered over, reveals a vertically stacked list of choices from which the user can make a selection.

The states of the dropdown differ mainly in the varying color of the dropdown frame: it becomes darker on hover and changes to light green when clicked. The following image shows the different states of the GROW design system dropdowns:

Dropdowns are commonly used in our products for the following purposes:

• Navigation menus: To organize and display links to different sections or subpages of a website in a compact and structured manner. Clicking on a top-level menu item reveals a dropdown with subcategories or related pages.

• Form inputs: To provide users with a predefined set of options to choose from when filling out a form field, rather than allowing free-text entry. This prevents errors and ensures consistent data.

• Attribute selection: To allow users to select values or configurations for various attributes of a product, service, or setting (e.g., size, color, quantity).

• Content organization: To categorize and group related content, such as blog posts, products, or resources, making it easier for users to find what they are looking for.

• Space-saving: Dropdowns are a space-efficient way to present multiple options without cluttering the interface, especially when screen space is limited.