> For the complete documentation index, see [llms.txt](https://docs.incari.com/incari-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.incari.com/incari-studio/2023.2/objects-and-types/scene2d-objects/gui/dropdown.md).

# Dropdown

The **Dropdown** is a **GUI** **2D Object** that allows the user to create a *dropdown menu*. The options in the menu, together with the colors and size, can be customized in the [**Attributes**](#attributes).

![Dropdown GUI Object.](/files/k0ZxLpvtTOROhCXfG0OV)

## Attributes

The **Object's** **Attributes** can be used to fully customize the **Object**. Explained below, they are:

* [**Transformation**](#transformation)
* [**Text**](#text)
* [**Dropdown**](#dropdown)
* [**Code**](#code)
* [**Tag**](#tag)

### Transformation

![Transformation Attributes.](/files/uK7tEddppj5KseRQc06J)

The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](/incari-studio/2023.2/objects-and-types/attributes/common-attributes/transformation.md).

### Text

![Text Attributes.](/files/XGDRptLWmepA87N018wX)

The `Text` **Attributes** customize the textual elements of a **Dropdown**.

* `Font family` offers three different font types: `monospace`, `sans-serif`, and `serif`. More fonts can be added by the user in [**Project Settings**](/incari-studio/2023.2/modules/project-settings/fonts.md).
* `Transform` can easily change certain text aesthetics without requiring the user to change the `Options` **Attributes** themselves. `Capitalize` makes the first letter capital, `uppercase` makes all letters capital, and `lowercase` makes all letters lowercase.
* `Font size (px)` determines the size of the font in pixels.
* `Line height (%)` determines the placement of the text within the **Dropdown**.
* `Font color` decides the color of the **Dropdown's** text.

### Dropdown

![Dropdown Attributes.](/files/nVdcMGdUkVpHGWPuwxKU)

The `Dropdown` **Attributes** provide crucial data for a **Dropdown Object**.

* `Active index` determines which `Option` is shown at the front of the **Dropdown**. Remember that the first element has the index of 0.
* `Background Color`decides the color of the **Dropdown's** background.
* `Options` provides the elements which will populate the **Dropdown**. Here there are three elements called `one`, `two`, and `three`.

In the above image, because the `Active index` is set to 1, 'two' would be element shown at the front of the **Dropdown**.

### Code

![Code Attributes.](/files/hirsBa1pQYnniCc4yIcB)

The `Code` **Attributes** allow for more customizability. This can override any stylesheet provided in the [**Project Settings**](/incari-studio/2023.2/modules/project-settings/style.md) or a [**Scene2D**](/incari-studio/2023.2/objects-and-types/project-objects/scene2d.md).

To address these in the **Logic**, please refer to the [**Object 2D Nodes**](/incari-studio/2023.2/toolbox/incari/object2d.md).

* `Class names` contain the *CSS* class names of the **Object**.
* `Stylesheet` contains the *CSS* stylesheet of the **Object**.

### Tag

![Tag Attributes.](/files/hKG4ViIIvTY99HH0SQ2e)

This **Attribute** manages the *tags* for the **Dropdown**. See more on *tags* [here.](/incari-studio/2023.2/objects-and-types/attributes/common-attributes/tag.md)

## Example

The following is a simple example of a **Dropdown** with three options:

![Dropdown.](/files/HQjASFRDF18XQE9wKPK6)

The `Options` **Attribute** defines the options in the **Dropdown**:

![Options Attributes.](/files/FNOHKnFOoc3pA73OK3fx)

Finally, this **Dropdown** looks like this when the **Project** is run:

![Dropdown example.](/files/cN3ovfxRvWrR7KolDlkN)