Skip to content

Intro to dropdowns

A dropdown is another implementation of the multiple option widget, where you have a clickable button that expands an option list on click, allowing you to select a value. It is quite common in UI design.

dropdowns

Dropdowns have been enhanced in gooey 2025.4 and onwards, however some changes might be breaking to projects you've created with the older versions.

Constructor

The constructor for dropdowns is UIDropdown. UIDropdown inherits from UIOptionGroup. This means that it has the same base values (for example, to get the selected index, you would call the same exact getIndex method as in the mutliple option groups).

The signature is the following:

UIDropdown(_id, _x, _y, _option_array, _sprite_dropdown, _sprite, _initial_idx=-1, _relative_to=UI_DEFAULT_ANCHOR_POINT)
  • id is the string ID.
  • x and y are the offsets with respect to the anchor point. Note that, as directed in the Fundamentals page, your sprites should have its origin point set to top left, to allow for correct positioning in gooey.
  • option_array is the array of strings containing the possible values to choose from.
  • sprite_dropdown is the sprite to use for rendering the background of the list of elements, when expanded.
  • sprite is the sprite to use for rendering the background of the clickable button, when the dropdown is not expanded.
  • initial_idx is the initially selected index. If -1 or omitted, the widget will not have any option selected when created and can instead display a placeholder text (note this feature is new in gooey 2025.4 - prior to that, there's no placeholder text available and initial_idx is 0 if omitted).
  • relative_to is the anchor point, as usual from the UI_RELATIVE_TO enum.

States

A dropdown widget has two states:

  • Inactive - where only the currently selected option is shown. You can click over it to display the list;
  • Active - where both the currently selected option and the list of items is shown. You can click over an optino to select that option, or click on the selected option to close it.

Starting with gooey 2025.4, you can get the state with isDropdownActive.

Setting the appearance

The dropdowns use up to three sprites to display:

  • The base sprite of the dropdown, which is a sprite to render below the selected option.
  • The dropdown sprite, which is a sprite to render below the list of elements when the dropdown is active.
  • The arrow sprite, a small arrow that appears next to the selected item.

You can use the setters to change sprites and images for these three sprites.

Starting with gooey 2025.4, there's some additional appearance options you can set:

  • You can set the text padding for the main button and list individually (setPadding...).
  • You can set the spacing between elements of the list, with setSpacing.
  • You can set the placeholder text string to show when there's no option selected, with setPlaceholderText.

Drawing the list beyond a panel's edge

By default, gooey does not allow for widget interactions outside its ancestor chain. This means, in particular, you cannot interact with a widget if it goes out of bounds from its containing panel. However, starting with gooey 2025.4, you can get interaction from a dropdown list even if it goes beyond a panel's edge. This can be useful for creating a menu bar or toolbar, where you want a panel to be "short" but have the ability to render the list and interact with it.

The requirement for this is to set the panel to not clip its contents, using setClipsContent.

A note on the number of options

Dropdowns in gooey do not currently support scrolling, so there will be a practical limit on how many options you can render (depending on your screen/UI/panel real estate).

Example

Let's use the same example and asset pack we had in the Option group tutorial.

1
2
3
4
5
6
7
var _panel = new UIPanel("TestPanel", 0, 0, 400, 350, blue_panel, UI_RELATIVE_TO.MIDDLE_CENTER);
_panel.setTitle("Choose your difficulty").setImageAlpha(0.7);
var _opts = new UIDropdown("MultipleOption", 0, 50, ["Easy", "Medium", "Hard", "Nightmare"], green_button01, blue_button00,,UI_RELATIVE_TO.TOP_CENTER);
_opts.setVertical(self.vertical).setSpriteArrow(grey_arrowDownGrey).setTextFormatMouseover("[fa_left][#0000bb]");
_opts.setSpacing(8).setPaddings(12);
_opts.setPlaceholderText("Choose:");
_panel.add(_opts);

You can take a look at the resulting interactive example here. Use Space to toggle between whether the panel clips content or not, and you can resize the panel and try to interact with the list, to view how it behaves on both options.

Not working?

If interaction is not working, click on the black bar just above the game canvas, to activate the iframe element - otherwise keys are processed by the site itself.