Dropdown

A collapsible list of buttons.

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.
Menu Drop Orientation	Down or up Orientation of dropdown menu. Starting at the top and going down or starting above and going up.
Alignment	Change dropdown menu to go left to right or right to left.
Appearance Display as	Change to look of the dropdown to: Button with label Hyperlink Hyperlink button Icon Image
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.
Button Group Properties Orientation	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.

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.

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.

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.

Change appearance and add buttons

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:

The dropdown

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:

Adding a button with drag and drop

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. 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.

Select a button

Behavior and Appearance settings

The different configurations

Result from a users perspective