> 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/2024.1/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/fofFmmcxY8Fi8WQWtdxm)

## Attributes

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

* [**Transformation**](#transformation)
* [**Dropdown**](#dropdown)
* [**Text**](#text)
* [**Font**](/incari-studio/2024.1/objects-and-types/scene2d-objects/gui/dropdown.md)
* [**Style**](#style)
* [**Tag**](#tag)

### Transformation

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

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

### Dropdown

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

The `Dropdown` **Attributes** provide crucial data for a **Dropdown Object**. The `Options` have two types: `Static Text` and `Translation`. This can be switched using the text or translation icons to the right, in that order.

![Static Text and Translation.](/files/tDPDD7Jr4e8xwGcV2C3b)

* `Active index` determines which `Option` is shown at the front of the **Dropdown**. Remember that the first element has the index of 0.
* `Options` provides the elements which will populate the **Dropdown**. Here there are three elements called `one`, `two`, and `phrase`. The first two are of type `Static Text`, where the user simply types the desired text. The third is of type `Translation`, which lets the user choose the key of the current language (which is established in the [**Project Settings**](/incari-studio/2024.1/modules/project-settings/localization.md)). In the image above, the selected key is `phrase`.

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

### Text

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

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

* `Color` decides the color of the **Dropdown's** text.
* `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.
* `Line height (%)` determines the placement of the text within the **Dropdown**.

### Font

![Font Attributes.](/files/STIiajfJdckNx03lyAQK)

The `Font` **Attributes** focus on the details of the **Drowpdown's** text. Please note that while **Dropdowns** are capable of handling [*variable fonts*](/incari-studio/2024.1/modules/project-settings/fonts.md#variable-fonts), only the default style will be used, as the configurable **Attributes** are not available for this **Object**.

* `Family` offers two different font types: `Manrope` and `Source Code Pro`. More fonts can be added by the user in [**Project Settings**](/incari-studio/2024.1/modules/project-settings/fonts.md).
* `Size` determines the size of the font in pixels.

### Style

![Style Attributes.](/files/8BSeUnjgyAriIQEkuDb2)

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

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

* `Background Color` decides the color of the **Dropdown's** background.
* `CSS Classes` contain the *CSS* class names of the **Object**.
* `Stylesheet` contains the *CSS* stylesheet of the **Object**.

### Tag

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

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

## Example

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

![Dropdown.](/files/2ZWcQqvbwbz12c9ZdBJp)

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

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

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

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