DropdownList2D
- Last UpdatedNov 24, 2025
- 7 minute read
The DropdownList2D node can be used to create expandable and collapsible dropdown selection lists.
The component is divided into two main areas:
-
Header area: Shows the currently selected item and is always visible.
-
Selection list area: Shows the list of available options.
Platform support
This node is fully supported on XR-Windows, XR-Portable Windows, XR-Portable iOS, XR-Portable Android, and XR-Portable WASM platforms.
|
XR-WIN |
XR-P-WIN |
XR-P-IOS |
XR-P-AND |
XR-P-WASM |
|---|---|---|---|---|
|
Full support |
Full support |
Full support |
Full support |
Full support |
|
|
|
|
|
|
States
The component has three states (collapsed, expanded and disabled) to which corresponds a different visual aspect.
-
Collapsed—Header is shown with its headerColor or headerImage. List is not shown.
-
Expanded—Header is shown with its headerExpandedColor or headerExpandedImage. List is shown with its listColor or listImage. SelectorColor or selectorImage is used ro represent selected item.
-
Disabled—Header is shown with disabledColor or disabledImage. Header is not shown.
Due to its behavior the DropdownList2D component usually does not draw all its size area. When it is collapsed, only the header area is drawn. When it is expanded, the list is shown with a number of lines equal to the items size or to the maximum number of lines that fit in the size.
Customizing the look and feel
The Dropdown2D node is highly customizable supporting colors or images in alternative for most of its elements.
|
Element |
Customization |
|---|---|
|
Line (both in header and list) |
|
|
Text (both in header and list) |
|
|
Header |
|
|
List |
|
|
Scroll Icons |
|
|
Border (shown over color, not over images) |
|
Managing user interaction
When active and enable are both set to true, this component accepts input from gamepad, keyboard, and mouse.
|
Action |
Gamepad |
Mouse |
Keyboard |
|---|---|---|---|
|
Select next item |
D-Cross down |
Move mouse over list |
Arrow down |
|
Select previous item |
D-Cross up |
Arrow down |
|
|
Select last visible item |
(RB) (6) |
Scroll mouse wheel |
Page down |
|
Select first visible item |
(LB) (5) |
Page Up |
|
|
Select list item |
(A) (2) |
Click on item inside list |
Enter |
|
Collapse without selecting |
(B) (3) |
Click inside header |
Esc |
Code example
This is a code example for DropdownList2D.
<DropdownList2D name=”aDropdownList” active=”true” />
Image color filter modes
The following options define the strategy to use when applying a color filter to an image:
-
none—The selected color is not applied to the images.
-
screen—The selected color is added to the image. This makes the image brighter and has more effect on dark colors. Black color is colored, light colors will tend to white, and white color stays white (since it is already the lightest color possible). This mode is suited to color black or dark glyphs by a selected color.
-
multiply—The image colors are multiplied by the selected color. This makes the images darker and has more effect on light colors. White color is colored, dark colors will tend to black, and black color stays black (since it is already the darkest color possible). This mode is suited to color white or light glyphs by a selected color.
-
overlay—Applies both screen and multiply strategies to the image by the selected color. This keeps the image brightness almost the same, has a balanced influence on light and dark colors, and allows to color both black and white.
-
invert—Inverts the color of the displayed image. The selected color is not used in this mode.
DropDownList2D fields
These are the fields for the DropdownList2D node. Only the node-specific fields are indicated, not fields obtained by inheritance.
Field inheritance: NodeBase > RectBase2D > DropDownList2D
|
Fields |
Type |
Use |
Default Value |
Description |
|---|---|---|---|---|
|
active |
sbool |
Optional |
false |
When set to true, the list can react to mouse, keyboard, and gamepad inputs. |
|
arrowClickEnable |
sbool |
Optional |
false |
This option enables scrolling on touchscreen devices. When enabled, the arrows for hidden items become clickable — allowing navigation to those items. |
|
dynamicFontScaling |
sbool |
Optional |
true |
Improves the quality of text by applying Dynamic Font Scaling rendering. |
|
enabled |
sbool |
Optional |
true |
When set to true, the list does not react to mouse, keyboard, and gamepad inputs. Also, it cannot be expanded and the visual aspect changes. |
|
font |
sstring |
Optional |
Arial|Regular|20 |
The font to use for both header and list texts. |
|
headerColor |
svec3 |
Optional |
0 0 0 |
The color for header background when collapsed. This value is used if the corresponding image is set to null. |
|
headerExpandedColor |
svec3 |
Optional |
0.2 0.2 0.2 |
The color for header background when expanded. This value is used if the corresponding image is set to null. |
|
headerExpandedImage |
sstring |
Optional |
“” |
When set, this image is used for the header background when expanded. |
|
headerDisabledColor |
svec3 |
Optional |
0.5 0.5 0.5 |
The color for header background when disabled. This value is used if the corresponding image is set to null. |
|
headerDisabledImage |
sstring |
Optional |
“” |
When set, this image is used for header background when header is disabled. |
|
headerImage |
sstring |
Optional |
“” |
When set, this image is used for header background when collapsed. |
|
headerImageColorFilter |
svec4 |
Optional |
0, 175, 239 |
A solid color that is blended to the headerImage, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
headerImageColorFilterMode |
senum |
Optional |
none |
Defines the strategy used to blend the color selected in headerImageColorFilter to the displayed headerImage. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
headerImageDisabledColorFilter |
svec4 |
Optional |
127, 127, 127 |
A solid color that is blended on the displayed headerImageDisabled, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
headerImageExpandedColorFilter |
svec4 |
Optional |
0, 31, 94 |
A solid color that is blended on the displayed headerImageExpanded, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
headerImageExpandedColorFilterMode |
senum |
Optional |
none |
Defines the strategy used to blend the color selected in headerImageExpandedColorFilter on the displayed headerImageExpanded. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
headerIndex |
sint |
Optional |
-1 |
Index of the item currently shown in the header. |
|
headerValue |
sstring |
Read Only |
Internally Calculated |
The item currently shown in the header. |
|
isExpanded |
sbool |
Optional |
false |
Shows whether the control is expanded or not. This field can be used to trigger expansion/collapse. |
|
isOverHeader |
sbool |
Read Only |
Internally calculated |
Changes to true if the mouse enters the header area. |
|
items |
mstring |
Optional |
“” |
The item options to display in the control list. |
|
listColor |
svec3 |
Optional |
0.2 0.2 0.2 |
The color used for list background. Used if the corresponding image is set to null. |
|
lineHeight |
sint |
Optional |
20 |
Line height for both header and list areas. The minimum line size is determined by the font size. |
|
listImage |
sstring |
Optional |
“” |
When set, this image is used for list background. |
|
listImageColorFilter |
svec4 |
Optional |
0, 31, 94 |
A solid color that is blended on the displayed listImage, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
listImageColorFilterMode |
senum |
Optional |
none |
Defines the strategy used to blend the color selected in listImageColorFilteron the displayed listImage. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
listIndex |
sint |
Optional |
0 |
Index of the currently selected item in the list area. |
|
scrollUpImageColorFilter |
svec4 |
Optional |
0, 175, 79 |
A solid color that is blended on the displayed scrollUpImage, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
scrollUpImageColorFilterMode |
senum |
Optional |
none |
Defines the stategy used to blend the color selected in scrollUpImageColorFilteron the displayed scrollUpImage. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
selectorColor |
svec3 |
Optional |
0 0 1 |
The color used for list selector. This value is used if the corresponding image is set to null. |
|
selectorImage |
sstring |
Optional |
“” |
When set, this image is used for list selector. |
|
selectorImageColorFilter |
svec4 |
Optional |
0, 175, 239 |
A solid color that is blended on the displayed selectorImage, supports alpha channel. For more information about different blend strategies, see Image color filter modes. |
|
selectorImageColorFilterMode |
senum |
Optional |
none |
Defines the strategy used to blend the color selected in selectorImageColorFilter on the displayed selectorImage. The following options are available: none, screen, multiply, color, invert. See Image color filter modes section for details. |
|
scrollVisible |
sbool |
Optional |
true |
Enables display of scroll icons when not all the items fit in the list area. |
|
scrollOffset |
sint |
Optional |
0 |
Moves the scroll icons left or right to better fit inside list area. |
|
scrollUpImage |
sstring |
SSTRING |
“” |
When set, this image is used for both up and down scroll icons. If not set, standard triangles are drawn. |
|
textColor |
svec3 |
Optional |
1 1 1 |
The font color for both header and list texts. |
|
textMargin |
svec4 |
Optional |
0 0 0 0 |
The margins to adjust text positioning inside the line. |