# Drop-down menu

> [HTML Version](drop-down-menu.html)

The **Drop-down menu** widget is a [button](button_widget.md) on a [page](360009924451.md) or a form that opens a drop-down menu with a list of actions.  Each menu item is handled by a separate [script](client_server_scripts.md).

To add the widget, drag it from the right panel of the [interface designer](interface_designer.md) to the canvas or use the **+Widget** button. To learn more, see [Form templates](360029250931.md). After that, set up the widget in the settings window.

## Main tab

**(dropmenu_settings.PNG)**

- **Show content in designer**.** **Enable this option to display the widget’s content on the modeling canvas.

- **Position\***. Specify the position of the menu items in relation to the button.

- **Window size\***. Specify the size of the menu.

## Events and System tabs

These tabs are similar for all widgets. They allow you to set the widget’s visibility and access permissions, configure the widget’s behavior when the user hovers over it, etc. To learn more about these settings, see [System widget settings](common_widget_settings.md).

To finish, click **Save**.

### Drop-down menu items



When you’ve finished configuring the widget, you need to add items that will be displayed in the drop-down menu. To do this, click **+Add menu item **and configure the item.

**(drop-down-menu-2.png)**



- **Name\***. Enter the menu item name.

- **Event on click**. Specify the event that needs to happen when the user clicks the menu item. For example, it can change the status of app item. To implement this logic, you need to add a corresponding script. Enter the script name and click **Open**. You will see the **Script** tab. Write the script that you need. Find out more in the [Scripts in widgets](client_server_scripts.md) article.

You can also rename the [button](button_widget.md) or change its settings. To do this, click the gear icon next to the button’s name.

To finish configuration, click **Save**.

To make the form available to users, click **Save** and **Publish** in the designer's toolbar.

### Example

In the following example, the **Drop-down menu** widget is added to the view form of the **Orders** app. The default button name is changed to **Apply Discount**. We added a script to each menu item. These scripts recalculate the price of the order when a user selects the required discount (10% or 15%). The new amount is then displayed in the **Discount Price** field.

**(drop-down-menu-3.png)**