Dropdowns for Power Apps

Add dropdown menus and selection components to your Power Apps. Dropdowns save space by hiding options until the user clicks to reveal them.

When to use dropdowns

Dropdowns are perfect when you have a list of options that would take too much space to show all at once. They're commonly used for navigation menus, user profiles, and action lists.

Choose your dropdown style

Dropdown Menu

Simple dropdown with trigger button and list of options. Clean design that fits anywhere.

Best for: General navigation menus, action lists, and anywhere you need a simple option list.

Settings you can customize:

• Trigger button label
• Menu items (labels)
• Styling and colors

User Profile Dropdown

Dropdown designed for user account menus. Shows profile picture, user name/email, and action items like Dashboard, Settings, and Sign out.

Best for: App headers where you need a user account menu. Displays the logged-in user's information.

Settings you can customize:

• Menu items (Dashboard, Settings, etc.)
• Sign out button text
• Profile display options

Dropdown Expandable

Hierarchical dropdown with expandable sub-items. Menu items can contain nested options.

Best for: Complex navigation structures with categories and sub-categories. Admin panels with nested menu sections.

Settings you can customize:

• Top-level items
• Expandable items with sub-menus
• Nested item labels
• Expand/collapse indicators

Dropdown - Profile Menu

Profile dropdown with trigger button, user info section, and customizable actions. Can use Microsoft account data or custom values.

Best for: User profile menus where you want to show account info and provide quick access to profile-related actions.

Settings you can customize:

• Trigger button text
• Use Microsoft account or custom user info
• Custom name and email
• Menu items and sign out text

Implementation steps

1. Select your dropdown style

Go to Dropdowns and choose the style that fits your use case.

2. Configure your dropdown

Click on your chosen component and use the Settings tab to:

• Set trigger text - What the button says before clicking
• Add menu items - Define the options that appear
• Configure user info - (Profile dropdowns) Set name/email or use Microsoft account
• Set sub-items - (Expandable) Configure nested menu structure

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect dropdown actions

After pasting, connect each menu item to your app logic:

Open/close dropdown

// Toggle dropdown visibility
Set(varDropdownOpen, !varDropdownOpen)

// Close when clicking outside
Set(varDropdownOpen, false)

Navigate on menu item click

// Handle menu item selection
Switch(
    ThisItem.Label,
    "Dashboard", Navigate(DashboardScreen),
    "Settings", Navigate(SettingsScreen),
    "Profile", Navigate(ProfileScreen)
);
Set(varDropdownOpen, false)

Sign out action

// Sign out the user
Exit()

// Or navigate to login screen
Navigate(LoginScreen, ScreenTransition.Fade);
Clear(UserSession)

Get Microsoft account info

// Display current user
User().FullName
User().Email
User().Image

Track selected item

// Store selection in variable
Set(varSelectedOption, ThisItem.Label);
Set(varDropdownOpen, false)

Common use cases

Navigation menu

Use Dropdown Menu in your app header for navigation options like Home, Reports, Help.

User account menu

Use User Profile Dropdown to show logged-in user with quick access to Profile, Settings, Sign out.

Admin navigation

Use Dropdown Expandable for admin panels with sections like Users (→ Add, Edit, Delete), Reports (→ Sales, Traffic), Settings.

Action menu

Use Dropdown Menu for "More actions" buttons with options like Edit, Duplicate, Archive, Delete.

Best practices

• Keep menus short - 5-7 items maximum, use sub-menus for more
• Use clear labels - "My Profile" not "Profile Settings Page"
• Order logically - Most used items first, destructive actions last
• Close on selection - Dropdown should close when user picks an option
• Show visual feedback - Highlight hovered items
• Consider keyboard - Users should be able to navigate with arrow keys

Troubleshooting

Dropdown not opening

Check that the trigger button's OnSelect sets the visibility variable to true. Make sure the variable name matches in all places.

Dropdown not closing

Verify the close action runs on item selection and when clicking outside. Add a transparent overlay that closes the dropdown when tapped.

Items not clickable

Make sure each menu item has an OnSelect property. Check that the gallery template's OnSelect is configured, not just the gallery itself.

Profile image not showing

For Microsoft account images, ensure User().Image is available in your environment. Some tenants don't expose user photos.

Menu appears behind other elements

Set a high Z-index on the dropdown container (100+) so it appears above other content.