Overlays & Menus

Avatar Dropdown

Added Aug 11, 2026

A circular avatar button that opens a dropdown menu (Profile, Billing, Settings, and a destructive Log out action), using Power Apps' modern Avatar control for the avatar itself. Inspired by the shadcn/ui AvatarDropdown composition.

CopySnips Live Preview

How to Use

On the Settings tab, edit the initial shown in the avatar circle and the 4 menu item labels. The list is fixed at exactly 4 items: you can relabel each one but can't add or remove any (item 4 always stays the destructive, separated item). Avoid a colon in a label ("Log: out"); it can break the pasted YAML. The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). Two independent GroupContainers are added: conAvatarTrigger (the avatar button) and conAvatarPanel (the dropdown menu), positioned directly below it. They are NOT nested, the same trigger+panel pattern used by Combobox, keeping every size literal instead of computed from cross-referenced siblings.
Click the avatar to open the menu, click it again (or select any item) to close it. Power Apps' modern Avatar control has no click event of its own, so a fully transparent, circular Classic/Button overlay (btnAvatarHit) handles it. It stays borderless in every state (no hover/open outline). Click-outside-to-close isn't reliably available in Classic Power Apps controls (same limitation as Combobox).
The Avatar control (avAvatarDropdown) is Power Apps' modern Avatar@1.0.40, showing initials only (Image:=Blank()); set Image directly in the pasted YAML if you want a real picture instead.
The menu (Profile/Billing/Settings/Log out) is a single Gallery (galAvatarMenu) with one row template (btnAvatarItemHit), the same Gallery-driven pattern as Combobox's option list, rather than 4 separate hardcoded buttons. Each row shows a placeholder confirmation toast (Notify()) and closes the menu on click; wire btnAvatarItemHit's OnSelect to your real per-item action once connected (e.g. a Switch(ThisItem.Label, ...)).
No OnVisible initialisation needed: the menu starts closed.

Problem Solved

Provides a ready-made profile-avatar-with-dropdown-menu pattern (Profile/Billing/Settings/Log out), extremely common in app headers, using Power Apps' modern Avatar control for the initials display, which Power Apps has no other native "user menu" equivalent for.

Integration

Initial and the 4 menu item labels are settings-driven plain text substituted into galAvatarMenu.Items (Label per row; Destructive/Separator stay fixed per position). To add/remove items or change which one is destructive, edit the array directly in the pasted YAML. Wire btnAvatarItemHit's OnSelect to your real per-item navigation/sign-out logic.

- conAvatarTrigger:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =RGBA(0, 0, 0, 0)
      Height: =36
      Width: =36
      X: =20
      Y: =20
    Children:
      - avAvatarDropdown:
          Control: Avatar@1.0.40
          Properties:
            Image: =Blank()
            Name: ="C"
            Height: =36
            Width: =36
            X: =0
            Y: =0
      - btnAvatarHit:
          Control: Classic/Button@2.2.0
          Properties:
            Align: =Align.Center
            BorderColor: =RGBA(0, 0, 0, 0)
            BorderStyle: =BorderStyle.Solid
            BorderThickness: =1
            Color: =RGBA(0, 0, 0, 0)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =0
            Font: =Font.'Open Sans'
            HoverColor: =RGBA(0, 0, 0, 0)
            HoverFill: =RGBA(0, 0, 0, 0)
            OnSelect: =Set(varAvatarDropdownOpen, !varAvatarDropdownOpen)
            PressedFill: =RGBA(0, 0, 0, 0)
            RadiusBottomLeft: =17
            RadiusBottomRight: =17
            RadiusTopLeft: =17
            RadiusTopRight: =17
            Text: =""
            Height: =Parent.Height - 2
            Width: =Parent.Width - 2
            X: =1
            Y: =1
- conAvatarPanel:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.Bold
      Fill: =RGBA(255, 255, 255, 1)
      Height: =168
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Visible: =varAvatarDropdownOpen
      Width: =128
      X: =20
      Y: =60
    Children:
      - galAvatarMenu:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            DelayItemLoading: =false
            Fill: =RGBA(255, 255, 255, 1)
            Height: =160
            Items: =[{Label:"Profile",Destructive:false,Separator:false}, {Label:"Billing",Destructive:false,Separator:false}, {Label:"Settings",Destructive:false,Separator:false}, {Label:"Log out",Destructive:true,Separator:true}]
            ShowScrollbar: =false
            TemplatePadding: =0
            TemplateSize: =40
            Width: =128
            X: =0
            Y: =4
          Children:
            - imgAvatarItemSeparator:
                Control: Image@2.2.3
                Properties:
                  Fill: =RGBA(226, 232, 240, 1)
                  Image: =Blank()
                  Visible: =ThisItem.Separator
                  Height: =1
                  Width: =Parent.Width
                  X: =0
                  Y: =3
            - btnAvatarItemHit:
                Control: Classic/Button@2.2.0
                Properties:
                  Align: =Align.Left
                  BorderColor: =RGBA(0, 0, 0, 0)
                  BorderStyle: =BorderStyle.None
                  Color: =If(ThisItem.Destructive, RGBA(185, 28, 28, 1), RGBA(15, 23, 42, 1))
                  Fill: =RGBA(255, 255, 255, 1)
                  FocusedBorderColor: =RGBA(0, 0, 0, 0)
                  FocusedBorderThickness: =0
                  Font: =Font.'Open Sans'
                  HoverBorderColor: =RGBA(0, 0, 0, 0)
                  HoverColor: =Self.Color
                  HoverFill: =If(ThisItem.Destructive, RGBA(254, 242, 242, 1), RGBA(241, 245, 249, 1))
                  OnSelect: =Set(varAvatarDropdownOpen, false); Notify(ThisItem.Label & " clicked — wire this button to your real action once connected.", NotificationType.Information)
                  PaddingLeft: =12
                  PressedBorderColor: =RGBA(0, 0, 0, 0)
                  PressedFill: =RGBA(226, 232, 240, 1)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  Size: =10
                  Text: =ThisItem.Label
                  VerticalAlign: =VerticalAlign.Middle
                  Height: =If(ThisItem.Separator, 32, 40)
                  Width: =Parent.Width
                  X: =0
                  Y: =If(ThisItem.Separator, 8, 0)

Implementation

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

Something not pasting right? Troubleshooting guide

Avatar Dropdown

Content

Menu Items

How to Use

Problem Solved

Integration

Implementation

Avatar Dropdown

Content

Menu Items

How to Use

Problem Solved

Integration

YAML Code

Implementation