All Collections
Engagement
Guides
Selecting elements in a dropdown menu
Selecting elements in a dropdown menu

This article provide directions on selecting a dropdown menu as an element of a step.

Gabriel avatar
Written by Gabriel
Updated this week

Since dropdown menus generally reveal their content by demand and their behavior is dynamic on a page, it is not recommended to use tooltips.

As you might already know, steps are building blocks of guides, and they fall into three categories: Modals, Tooltips, and Input Fields.

If your wish is to design a flow, at some point, entailing end-users to open a dropdown menu and select an item from it, you should go with the Tooltips by creating two separate steps:

  1. The first step is to open the dropdown menu.

  2. The second step is selecting an item from the submenu we've opened.

Note: We've utilized one of our dropdown lists in the Guide settings in the following example.

1) The first step is to open the dropdown menu

  • Select the Tooltip as your step type - you, too, can Create from Scratch.

  • Highlight the Dropdown Menu Bar and select it as this step's element; type your text in the given area.

  • Choose the option of "Proceed to Next Step on click of Element."

If you follow our previous instructions, with the help of the step you've created, end-users can click on the Menu Bar to open the Dropdown Menu like in the example below.

After opening the menu, we want people to select an item. So, our second step should be designed by that.

2. The second step is selecting an item from the Dropdown Menu.

  • Select the Tooltip as your step type - you, too, can Create from Scratch.

  • Then, while the menu is open, highlight the whole of it and then click to select it as this step's element; type your text in the given area.

Important: If your Dropdown Menu gets closed while trying to highlight it, move the cursor onto the Menu Bar and press Option (Alt for Windows) + Click. That way, the menu can remain open. First, you can highlight an item on the menu, and then, with the help of Up Arrow, you can highlight the menu as a whole.

  • Choose the option of 'Proceed to Next Step on click of Element.'

If you follow the above instructions, with the help of the step you've created, end-users can select an item from the Dropdown Menu.

Alternative method

If you prefer, you can combine all of the above into a single step. 

  • Again, select the Tooltip as your step type.

  • Choose the option of "Proceed to Next Step on click of Button."

  • Turn the "Interaction with the highlighted area ON." So that end users can click on the Menu Bar to open the Dropdown Menu.

  • Turn the "Interaction with page ON." So that end users can select an item from the menu they've opened.

If you follow the above instructions, with the help of a single step you've created, end-users 1) can open the Dropdown Menu, 2) select an item from there, and 3) proceed to the next step by clicking on the NEXT button like in the example below. 

Did this answer your question?