# Drop Down

(part of package '[Bootstrap Extra Components](/reference/servoyextensions/packages/ui-component-packages/bootstrap-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

Displays a list of menu items.\
It can be rendered as a standard button or a split button and supports dynamic menu management.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### buttonStyleClass

CSS style classes applied specifically to the button part of the Dropdown. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### enabled

Flag indicating whether the Dropdown is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true

***

### imageStyleClass

CSS style classes applied to the image or icon associated with the Dropdown. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### isButton

Indicates whether the Dropdown is rendered as a standard button. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### isSplitButton

Indicates whether the Dropdown is rendered as a split button. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false

***

### menuItems

An array of menu items to be displayed in the Dropdown. Type: [Array\<CustomType\<bootstrapextracomponents-dropdown.MenuItem>>](#menuitem)

***

### styleClass

CSS style classes applied to the Dropdown component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

### text

The text displayed on the Dropdown button. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### toolTipText

Tooltip text displayed when hovering over the Dropdown. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)

***

### visible

Flag indicating whether the Dropdown is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible)

***

## Events

### onAction(event)

Fired when the Dropdown button is activated.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the click event e.g. target element, mouse coordinates

***

### onMenuItemSelected(event,menuItem)

Fired when a menu item within the Dropdown is selected.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object containing details about the selection event e.g. target element, mouse coordinates
> * {[CustomType\<bootstrapextracomponents-dropdown.MenuItem>](#menuitem)} menuItem The menu item object that was selected

***

## API

### addMenuItem(menuItem)

Adds the given menu item to the Dropdown

**Parameters:**

> * {[CustomType\<bootstrapextracomponents-dropdown.MenuItem>](#menuitem)} menuItem MenuItem The bootstrapextracomponents-dropdown.MenuItem item to be added to the Dropdown.

***

### removeMenuItem(itemId)

Removes the menu item with the given item ID

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} itemId The unique identifier of the menu item to be removed from the Dropdown.

***

### setMenuItems(menuItems)

Sets the menu items of the Dropdown

**Parameters:**

> * {[Array\<CustomType\<bootstrapextracomponents-dropdown.MenuItem>>](#menuitem)} menuItems An array of bootstrapextracomponents-dropdown.MenuItem items to be set for the Dropdown, replacing any existing items.

***

## Types

## MenuItem

Represents a Menu Item for the Dropdown component. scripting type: CustomType\<bootstrapextracomponents-dropdown.MenuItem>

* enabled
  * Flag indicating whether the menu item is enabled.
  * **Type**: [enabled](/reference/servoy-developer/component_and_service_property_types.md#protected)
  * **Default Value**: true
* iconName
  * The name of the icon to be displayed alongside the menu item text.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* isDivider
  * Flag indicating whether this menu item is a divider.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)
* itemId
  * The unique identifier of the menu item.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* onAction
  * A handler function that is executed when the menu item is activated.
  * **Type**: [function](/reference/servoy-developer/component_and_service_property_types.md#function)
* text
  * The text displayed for the menu item.
  * **Type**: [tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring)
* userData
  * Optional user data associated with the menu item.
  * **Type**: [object](/reference/servoycore/dev-api/js-lib/object.md)

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/buttons-and-text/drop-down.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.