User Interface in Unity-Drop Down Menus

Creating and Using Drop-Down Menus in Unity

As we dive further into the User Interface world of Unity, a common thing that is found within applications is Drop-Down Menus.

We can create a Drop-Down Menu the same as any other UI Element in Unity by right-clicking in the Hierarchy > UI > DropDown.

The Drop-Down element looks similar to the Inpurt Field option but it has a bit more attached to it.

If we run the program, by default, we can click on the down arrow and it will show us a field of three different options. The Options that are displayed, are what we can manipulate in the Hierarchy panel that comes automatically found when the Drop_Down element is created.

For example, if we want to change the color of the Drop-Down menu, we can do so by selecting the Drop-down game object and adjusting the color in the Inspector. If we wish to change the color of what actually drops from the menu, we would navigate to what’s attached to the drop-down menu through the Hierarchy Panel and modify the Item Background object found nested in the Drop-Down element.

Let’s dive into the Inspector through the Drop-Down object. Most things that we find here will look familiar to how other objects in Unity appear. Let’s begin by looking at the label.

Within the Options section, we can add more options to the DropDown Menu by simply clicking the add button. The nice thing that Unity will do for us is that it will automatically enable a scroll bar for us and adjust to the size of our options list.

After the options section found in the Inspector is the “On Value Changed” section. This is where we enable what functions occur once the option is selected. Let’s create an example, to test out how to add a function once an option has been selected.

We’ll begin this by creating a new script. Be sure to add the UnityEngin.UI library. Let’s add a variable to define the DropDown button that we have in our scene.

Let’s create an Empty GameObject to act as our Manager and place the test script on it. With this created, we’ll call on it from the “On Value Changed” section that we can find in the Inspector with the Drop-Down Button selected.

If we run our program and make a selection in the Drop-Down menu, the console will return the value of each selection to us.

Let’s say that we transformed this Drop-Down menu into a video game difficulty selection. We could change the Method to calculate the difficulty based on the selection that was made through the Drop-Down menu by grabbing the value of the Drop-Down Menu.

See you at the next one!