Dropdown Menu

lowcodera Dropdown Menu Component

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

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

Property	Description	Accepted Values	Required
Type	Property to define dropdown fill	Default Outline	X
IsRequired	Property to make our dropdown menu field required	Boolean	X
ShowEmptyMenuOption	Property to show first menu option as empty	Boolean	X
ShowSelectedAsTitle	Property to show selected option in a title	Boolean	X
PlaceholderText	Property to show placeholder text for dropdown when no value is selected	String	X
Default	Property to show default selected item from dropdown	Numeric	X

Examples

Dropdown Menu with Icons

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"
    }
);

Property Configration

Event Configuration

Output Properties

Dropdown with circular radius

Static Collection Example

You can use the same collection used in section.

Property Configration

Event Configuration

Dropdown without Icons

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"
    }
);

Property Configration

Dropdown with Outline

Static Collection Example

You can use the same collection used in section.

Property Configration