> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/template-editor/interaction/dropdown.md).

# Dropdown

## ![](/files/faatb0u43nwgS4fqknj4)Introduction

The dropdown is a component that functions as a list of buttons. When a dropdown button is selected a menu is shown with all the different buttons you added. Every button can have custom functions and can be visibly differentiated from each-other using colors, icons and labels. 

### Properties

#### Template Properties

| Item                                                           | Description                                                                                                                                                       |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Visible when                                                   | Allows your to add a condition for user visibility of the button using the expression editor.                                                                     |
| <p><strong>Menu</strong><br>Drop Orientation</p>               | <p><strong>Down or up</strong> <br>Orientation of dropdown menu. Starting at the top and going down or starting above and going up. </p>                          |
| Alignment                                                      | Change dropdown menu to go **left to right** or **right to left**.                                                                                                |
| <p><strong>Appearance</strong><br>Display as</p>               | <p>Change to look of the dropdown to: </p><ul><li>Button with label</li><li>Hyperlink</li><li>Hyperlink button</li><li>Icon</li><li>Image</li></ul>               |
| Color context                                                  | Change the color of the button itself. What the color looks likes in the runtime depends on chosen template settings.                                             |
| Icon position                                                  | Choose the side which side of the label the icon is shown.                                                                                                        |
| **Edit menu buttons**                                          | Add remove or change the buttons shown in the dropdown menu. You can find the button specific properties [here](/platform/template-editor/interaction/button.md). |
| <p><strong>Button Group Properties</strong><br>Orientation</p> | Change the way a component fills the its space. **Horizontal** or fills up to down. **Vertical** fills up from left to right.                                     |
| Presentation                                                   | Changes the way buttons are grouped together. Separated or joined together.                                                                                       |
| Alignment                                                      | Changes where the button tries to go.                                                                                                                             |
| Size                                                           | Control the size of the button into: Large, Medium, small or extra small.                                                                                         |

{% hint style="info" %}
The properties menu changes depending on what part of the component is selected. Make sure your context is right when you have problems finding a property.&#x20;
{% endhint %}

### Illustrations

In the image below you see a template editor with a label "Dropdown" and the dropdown component right below the label. When the dropdown is first added to the template it is rendered with just an icon.

<figure><img src="/files/LsZeWYI0YhkkH7pt012M" alt=""><figcaption></figcaption></figure>

You can change what the dropdown item looks like with the Appearance section in the properties pane on the right. In the Image below we have selected the display as button setting and we keep the three dots icon on the right.&#x20;

<figure><img src="/files/yQtqXadMraE1n7oU3olr" alt=""><figcaption><p>Change appearance and add buttons</p></figcaption></figure>

This changes the dropdown to have a label and enables your own styling and context on the component. Now you also want to add buttons to the dropdown. This is done with the "Edit menu buttons" button in the properties pane. When this is selected an overlay opens with the content of the selected dropdown. The first time you will see this window:&#x20;

<figure><img src="/files/QcRXX5y0LI8PBUWqXcZE" alt=""><figcaption><p>The dropdown</p></figcaption></figure>

To add buttons you grab the button from the toolbar and drop it into the yellow box. This adds a button to the menu and the button properties to the properties pane on the right. To add more buttons just drop them into the field, while dragging the button a green bar appears when hovering over a valid location for the button. With a few buttons added it will look like this:&#x20;

<figure><img src="/files/G26cFYiSEXLBzNoqQhzB" alt=""><figcaption><p>Adding a button with drag and drop</p></figcaption></figure>

On the right in the property pane the functionality of the button and what the button looks like is configured. The behavior settings are the same as a normal button and an explanation of these options can be found [here](/platform/template-editor/interaction/button.md). In the appearance group you can change the text displayed in the buttons to your own text or change it to an expression as label. Here you can also add an icon to the button and chance the color of the button text and icon.&#x20;

<div><figure><img src="/files/5Ze8tzVjrZsyNJOmHzZc" alt=""><figcaption><p>Select a button</p></figcaption></figure> <figure><img src="/files/jpCfS7T8JwyP2iJZC2Qq" alt=""><figcaption><p>Behavior and Appearance settings</p></figcaption></figure></div>

&#x20;      &#x20;

<div><figure><img src="/files/lmOC5bswYaqjhmWQdgiz" alt=""><figcaption><p>The different configurations</p></figcaption></figure> <figure><img src="/files/mOUQggbiVj7Nzqu8VT03" alt=""><figcaption><p>Result from a users perspective</p></figcaption></figure></div>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.wem.io/platform/template-editor/interaction/dropdown.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.