Overlays & Menus

Dropdown Menu

Added Mar 25, 2026

A customizable dropdown menu that allows users to select an item from a list, displaying the selection in the button text.

No items defined

CopySnips Live Preview

How to Use

Copy the YAML snippet
Paste it into Power Apps Studio with Ctrl+V
Adjust the X, Y coordinates to position the dropdown on your screen.

Problem Solved

Provides a reusable and styled dropdown menu component that dynamically shows selections without extensive manual setup.

Integration

This component uses two context variables: `varDropdown` (boolean, controls panel visibility) and `varDropdownSelected` (text, stores the selected item's label). It also uses `varDropdownAnimTrigger` for the arrow animation. No initial setup is required for these variables, as the component will initialize them on its first interaction. The `OnSelect` property of the dropdown button toggles `varDropdown`, and the `OnSelect` of individual list items sets `varDropdownSelected` to `ThisItem.label`.

- conDropdown:
    Control: GroupContainer@1.4.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.Regular
      Fill: =RGBA(255, 255, 255, 1)
      Height: =160
      LayoutDirection: =LayoutDirection.Vertical
      RadiusBottomLeft: =5
      RadiusBottomRight: =5
      RadiusTopLeft: =5
      RadiusTopRight: =5
      Visible: =varDropdown
      Width: =181
      X: =504
      Y: =262
    Children:
      - galBtnItems:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            BorderColor: =RGBA(0, 18, 107, 1)
            Height: =Parent.Height
            Items: |-
              =[
                {id: 1, label: "Dashboard"},
                {id: 2, label: "Settings"},
                {id: 3, label: "Earnings"},
                {id: 4, label: "Sign out"}
              ]
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =40
            Width: =Parent.Width
            Y: =Parent.Height/2 - Self.Height/2
          Children:
            - btnItem:
                Control: Classic/Button@2.2.0
                Properties:
                  Align: =Align.Left
                  BorderColor: =ColorFade(Self.Fill, -15%)
                  BorderStyle: =BorderStyle.None
                  Color: =RGBA(0, 0, 0, 1)
                  DisabledBorderColor: =RGBA(247, 247, 247, 1)
                  Fill: =RGBA(255, 255, 255, 1)
                  Font: =Font.'Open Sans'
                  HoverColor: =Self.Color
                  HoverFill: =ColorFade(Self.Fill, -10%)
                  OnSelect: =Set(varDropdownSelected, ThisItem.label)
                  PaddingLeft: =25
                  PressedBorderColor: =ColorFade(Self.BorderColor, -40%)
                  PressedFill: =ColorFade(Self.Fill, -20%)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  Size: =10
                  Text: =ThisItem.label
                  Width: =galBtnItems.TemplateWidth
- conDropdownButton:
    Control: GroupContainer@1.4.0
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =RGBA(0, 0, 0, 0)
      Height: =40
      RadiusBottomLeft: =5
      RadiusBottomRight: =5
      RadiusTopLeft: =5
      RadiusTopRight: =5
      Width: =181
      X: =504
      Y: =212
    Children:
      - btnDropdown:
          Control: Classic/Button@2.2.0
          Properties:
            Align: =Align.Left
            BorderColor: =ColorFade(Self.Fill, -15%)
            BorderStyle: =BorderStyle.None
            Color: =RGBA(0, 0, 0, 1)
            DisabledBorderColor: =RGBA(166, 166, 166, 1)
            Fill: =RGBA(237, 237, 237, 1)
            Font: =Font.'Open Sans'
            HoverColor: =Self.Color
            HoverFill: =ColorFade(Self.Fill, -10%)
            OnSelect: |-
              =UpdateContext({ varDropdown: !varDropdown });
              UpdateContext({ varDropdownAnimTrigger: Text(Now(), "yyyymmddhhmmssfff") })
            PaddingLeft: =25
            PressedBorderColor: =ColorFade(Self.BorderColor, -40%)
            PressedFill: =ColorFade(Self.Fill, -20%)
            RadiusBottomLeft: =5
            RadiusBottomRight: =5
            RadiusTopLeft: =5
            RadiusTopRight: =5
            Size: =10
            Text: =If(!IsBlank(varDropdownSelected), varDropdownSelected, "Dropdown")
            Width: =181
      - imgArrow:
          Control: Image@2.2.3
          Properties:
            BorderColor: =RGBA(0, 18, 107, 1)
            Height: =15
            Image: |-
              ="data:image/svg+xml," & EncodeUrl(
                  "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='40px' height='40px'>
                    <style>
                      .arrowDropdown_" & varDropdownAnimTrigger & " {
                        stroke: black;
                        stroke-width: 1.5;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                        fill: none;
                        transform-origin: center;
                        animation-name: rotateArrowDropdown_" & varDropdownAnimTrigger & ";
                        animation-duration: " & If(IsBlank(varDropdownAnimTrigger), "0ms", "400ms") & ";
                        animation-fill-mode: both;
                      }
                      @keyframes rotateArrowDropdown_" & varDropdownAnimTrigger & " {
                        " & If(varDropdown, "0%", "100%") & " {
                          transform: rotate(0deg);
                        }
                        " & If(varDropdown, "100%", "0%") & " {
                          transform: rotate(180deg);
                        }
                      }
                    </style>
                    <path class='arrowDropdown_" & varDropdownAnimTrigger & "' d='m4.5 15.75 7.5-7.5 7.5 7.5' />
                  </svg>"
              )
            Width: =15
            X: =Parent.Width - Self.Width - 15
            Y: =Parent.Height/2 - Self.Height/2

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Dropdown Menu

General Settings

How to Use

Problem Solved

Integration

YAML Code

Implementation