A drop-down menu widget.

Type: Object

This widget is a UI element (a button or a toolbar item) that displays a drop-down menu when clicked. The drop-down menu items are loaded from an array specified from the items configuration option. You can specify a simple array as the widget data source.

var dropDownMenuData = [

Declare a function that processes a menu item click, and assign it to the itemClickAction configuration option.

var menuItemClicked = function(e){
    alert(e.itemData + "item clicked");

Note that you can access the clicked item text from the itemData field of the object passed as an argument to the itemClickAction function.

To create a dxDropDownMenu widget, add a div element with dxDropDownMenu Knockout binding within the body of the required view.

<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, itemClickAction: menuItemClicked }"></div>

The following demo illustrates how to create a widget without creating an HtmlApplication, views, and layouts. Refer to the Add a widget documentation section to learn how to create widgets within views in a PhoneJS application.

Show Example:


An object defining configuration options for the dxDropDownMenu widget.


This section describes members used to manipulate the object.