# Dropdown Menu

## Purpose

The lowcodera drop down menu component immediately adds professional gloss to your Power App and provides a highly effective menu solution for various application use cases. With its elegant flyout menu, the component has built-in support for icons, various styles and themes.

##  Variations

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FvQDAFroGthfrUiUdCqoD%2Fimage.png?alt=media\&token=123ea675-58c8-407d-bc48-aff667d38f18)

‌There are several variations of dropdown with different colors and configuration properties.

* Dropdown with Icons
* Dropdown with Circular radius
* Dropdown without Icons
* Dropdown with Outline

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="248">Control Property</th><th width="195">Description</th><th width="155">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>Type</td><td>Property to define dropdown fill</td><td><p>Default</p><p>Outline</p></td><td>X</td></tr><tr><td>IsRequired</td><td>Property to make our dropdown menu field required</td><td>Boolean</td><td>X</td></tr><tr><td>ShowEmptyMenuOption</td><td>Property to show first menu option as empty</td><td>Boolean</td><td>X</td></tr><tr><td>ShowSelectedAsTitle</td><td>Property to show selected option in a title</td><td>Boolean</td><td>X</td></tr><tr><td>PlaceholderText</td><td>Property to show placeholder text for dropdown when no value is selected</td><td>String</td><td>X</td></tr><tr><td>Default</td><td>Property to show default selected item from dropdown</td><td>Numeric</td><td>X</td></tr></tbody></table>

## Examples&#x20;

### Dropdown Menu with Icons

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FRK40mUDljYthFDKhTeCK%2Fimage.png?alt=media\&token=f2287673-e167-41cf-b398-7e44651b23cc)

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `colldropdownwithIcon` is defined in the Power App. The items property of the dropdown menu component is then bound to this collection.

```
ClearCollect(
    colldropdownwithIcon,
    {
        key: "1",
        text: "My profile",
        icon: "user"
    },
    {
        key: "2",
        text: "Settings",
        icon: "cog"
    },
    {
        key: "3",
        text: "Activity",
        icon: "calendar-alt"
    },
    {
        key: "4",
        text: "Support",
        icon: "phone-square"
    },
    {
        key: "5",
        text: "Logout",
        icon: "sign-out-alt"
    }
);


```

{% endtab %}

{% tab title="Property Configration" %}

* [x] `PlaceholderText` property is to set as **Menu with Icons**
* [x] `PlaceholderIcon` is to set as **archive**
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({Name: DropDownMenu1.CurrentText})
```

{% endtab %}

{% tab title="Output Properties" %}
Please check the following Output properties for Lowcodera's Dropdown control.

| Output Property           | Purpose                                                             | Example                   |
| ------------------------- | ------------------------------------------------------------------- | ------------------------- |
| DropDownMenu1.CurrentText | Get Current selected item's Text from Lowcodera dropdown Component. | DropDownMenu1.CurrentText |
| DropDownMenu1.CurrentKey  | Get Current selected item's key from Lowcodera dropdown Component.  | DropDownMenu1.CurrentKey  |

{% endtab %}
{% endtabs %}

### Dropdown with circular radius

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FapkPY6OVR0e0Jb4XCqzt%2Fimage.png?alt=media\&token=665e2d7c-8021-4318-a70c-8c1ed1a0009f)

{% tabs %}
{% tab title="Static Collection Example" %}
You can use the same collection used in [section](#dropdown-menu-with-icons).
{% endtab %}

{% tab title="Property Configration" %}

* [x] `Theme`property is to set as **Default**&#x20;
* [x] `PlaceholderText` is to set as **Menu with Icons**
* [x] `PlaceholderIcon` is to set as **bars**
* [x] `BorderRadius` is to set as **100**

{% endtab %}

{% tab title="Event Configuration" %}
Once we configure our textbox and we want to write some events, we need to use **`OnChange`** Event of the button

```
UpdateContext({Name: DropDownMenu1.CurrentText})
```

{% endtab %}
{% endtabs %}

### Dropdown without Icons

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FxbYWQxa80ADf3W1p9Ds0%2Fimage.png?alt=media\&token=7676e2b6-f324-44f8-884c-a4c9e30d7599)

{% tabs %}
{% tab title="Static Collection Example" %}
In this example, a collection with static data called `colldropdownwithoutIcon` is defined in the Power App. The items property of the dropdown menu component is then bound to this collection.

```
ClearCollect(
    colldropdownwithoutIcon,
    {
        key: "1",
        text: "My profile"
    },
    {
        key: "2",
        text: "Settings"
    },
    {
        key: "3",
        text: "Activity"
    },
    {
        key: "4",
        text: "Support"
    },
    {
        key: "5",
        text: "Logout"
    }
);
```

{% endtab %}

{% tab title="Property Configration" %}

* [x] `PlaceholderText` property is to set as **Menu without Icon**
  {% endtab %}
  {% endtabs %}

### Dropdown with Outline

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FsdPYeL4QkNX4w9xqDZVb%2Fimage.png?alt=media\&token=83ec2435-e5c0-4a6e-b80f-26f7a141ca53)

{% tabs %}
{% tab title="Static Collection Example" %}
You can use the same collection used in [section](#textbox-with-password).
{% endtab %}

{% tab title="Property Configration" %}

* [x] `Type` property is to set as **Outline**
* [x] `PlaceholderText` property is to set as **Menu without Icon**
  {% endtab %}
  {% endtabs %}