# 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.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-5475902959be31fac555938c6b85199f926d27a0%2Fdropdownimage120241.png?alt=media) ## Attributes The **Object's** **Attributes** can be used to fully customize the **Object**. Explained below, they are: * [**Transformation**](#transformation) * [**Dropdown**](#dropdown) * [**Text**](#text) * [**Font**](https://docs.incari.com/incari-studio/2024.1/objects-and-types/scene2d-objects/gui/dropdown) * [**Style**](#style) * [**Tag**](#tag) ### Transformation ![Transformation Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-3226bc98da164b49db5ce084924c62dbbf9873c7%2Fdropdowntransformation20241.png?alt=media) The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](https://docs.incari.com/incari-studio/2024.1/objects-and-types/attributes/common-attributes/transformation). ### Dropdown ![Dropdown Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-7d6f1223ea87fde8a3ba2725ec716477a247a94e%2Fdropdownatts20241.png?alt=media) 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.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-981fcfec4b57d2dca4efa0b62b3bde4612b662f3%2Ftextvstranslation.png?alt=media) * `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**](https://docs.incari.com/incari-studio/2024.1/modules/project-settings/localization)). 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.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-d31443513ad4f8934c94ffc959f993f1991b2d1a%2Fdropdowntext20241.png?alt=media) 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.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-afc0b4325e55720c33c24fb83974a1548bfa02bd%2Ffontatts20241.png?alt=media) The `Font` **Attributes** focus on the details of the **Drowpdown's** text. Please note that while **Dropdowns** are capable of handling [*variable fonts*](https://docs.incari.com/incari-studio/2024.1/modules/project-settings/fonts#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**](https://docs.incari.com/incari-studio/2024.1/modules/project-settings/fonts). * `Size` determines the size of the font in pixels. ### Style ![Style Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-016797c11a3e03bb94a3150105c3832fa7173242%2Fdropdownstyleatts20241.png?alt=media) The `Style` **Attributes** allow for more customizability. This can override any stylesheet provided in the [**Project Settings**](https://docs.incari.com/incari-studio/2024.1/modules/project-settings/style) or a [**Scene2D**](https://docs.incari.com/incari-studio/2024.1/objects-and-types/project-objects/scene2d). To address these in the **Logic**, please refer to the [**Object 2D Nodes**](https://docs.incari.com/incari-studio/2024.1/toolbox/incari/object2d). * `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.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-dc4f375e34ce9bdd2bebc3e93ff34c8680ab55bb%2Fbuttonattstag.png?alt=media) This **Attribute** manages the *tags* for the **Dropdown**. See more on *tags* [here.](https://docs.incari.com/incari-studio/2024.1/objects-and-types/attributes/common-attributes/tag) ## Example The following is a simple example of a **Dropdown** with three options: ![Dropdown.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-2eeb6dc1b04e33203902042e1907a8f5bcc9595f%2Fdropdownimage3rdtolast20241.png?alt=media) The `Options` **Attribute** defines the options in the **Dropdown**: ![Options Attributes.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-47d0143730a2b4b4ad623e0ec5f44226dfd1dafd%2Fdropdown2ndtolast20241.png?alt=media) Finally, this **Dropdown** looks like this when the **Project** is run: ![Dropdown example.](https://4263346935-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLnh3x8s9fddWeG8TaAug%2Fuploads%2Fgit-blob-2e25f734715ca9fe8a9c7168766b5df710dcaeb2%2Fdropdown-example.gif?alt=media)