Overlays & Menus

Drawer

Added Aug 9, 2026

A bottom-sheet overlay that slides up from the bottom of the screen: trigger button, dimmed backdrop (click to close), title, description, body text, and Confirm/Cancel actions. Built entirely from Horizontal/Vertical AutoLayout containers so it reflows responsively to whatever screen width it's pasted into. Inspired by the shadcn/ui Drawer component.

CopySnips Live Preview

How to Use

On the Settings tab, edit the trigger button text, title, description, body text, and the two action button labels. The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). Three independent top-level controls are added: btnDrawerTrigger (opens it), btnDrawerOverlay (a dimmed full-screen backdrop, click it to close), and conDrawerPanel (the sliding panel itself). They are NOT nested, matching the same independent-top-level-siblings pattern used by every trigger+panel component in this library.
conDrawerPanel.Width is =App.Width (not a fixed number) and every section inside it (conDrawerHeader, conDrawerBody, conDrawerFooter) is a Horizontal/Vertical AutoLayout GroupContainer with AlignInContainer:=Stretch instead of a hardcoded width. The whole thing reflows automatically to whatever screen width it ends up on. conDrawerBody additionally uses FillPortions:=1 so it grows or shrinks to fill whatever space is left between the fixed-height header and footer.
This is a bottom-sheet only (the "bottom" direction). Top/left/right variants would need a differently-shaped panel (full height instead of bottom-anchored) and aren't included in this version.
Click the Confirm or Cancel button, or the dimmed backdrop, to close: all three just set varDrawerOpen to false. No OnVisible initialisation needed; varDrawerOpen defaults to blank/falsy (closed) on load.

Problem Solved

Provides a mobile-friendly bottom-sheet overlay (the kind of pattern used for quick actions, filters, or forms that shouldn't take over the whole screen like a full dialog) which Power Apps has no native equivalent for.

Integration

All content is plain text substituted directly into the copied YAML (no settings-driven array/formula like Combobox or Data Table: every field is a single named value). Read/react to open state via varDrawerOpen anywhere in the app. To trigger the drawer from elsewhere (e.g. a menu item instead of the built-in trigger button), just add Set(varDrawerOpen, true) to that control's OnSelect.

- btnDrawerTrigger:
    Control: Classic/Button@2.2.0
    Properties:
      Align: =Align.Center
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderStyle: =BorderStyle.Solid
      BorderThickness: =1
      Color: =RGBA(15, 23, 42, 1)
      DisabledBorderColor: =RGBA(226, 232, 240, 1)
      Fill: =RGBA(255, 255, 255, 1)
      FocusedBorderColor: =RGBA(226, 232, 240, 1)
      FocusedBorderThickness: =1
      Font: =Font.'Open Sans'
      HoverBorderColor: =RGBA(203, 213, 225, 1)
      HoverColor: =RGBA(15, 23, 42, 1)
      HoverFill: =RGBA(248, 250, 252, 1)
      OnSelect: =Set(varDrawerOpen, true)
      PressedBorderColor: =RGBA(203, 213, 225, 1)
      PressedFill: =RGBA(241, 245, 249, 1)
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Size: =11
      Text: ="Open Drawer"
      Height: =40
      Width: =140
      X: =20
      Y: =20
- btnDrawerOverlay:
    Control: Classic/Button@2.2.0
    Properties:
      BorderStyle: =BorderStyle.None
      Color: =RGBA(0, 0, 0, 0)
      Fill: =RGBA(0, 0, 0, 0.5)
      Font: =Font.'Open Sans'
      HoverColor: =RGBA(0, 0, 0, 0)
      HoverFill: =RGBA(0, 0, 0, 0.5)
      OnSelect: =Set(varDrawerOpen, false)
      PressedFill: =RGBA(0, 0, 0, 0.5)
      Text: =""
      Visible: =varDrawerOpen
      Height: =App.Height
      Width: =App.Width
      X: =0
      Y: =0
- conDrawerPanel:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.Bold
      Fill: =RGBA(255, 255, 255, 1)
      LayoutDirection: =LayoutDirection.Vertical
      LayoutJustifyContent: =LayoutJustifyContent.Start
      LayoutAlignItems: =LayoutAlignItems.Stretch
      LayoutGap: =0
      LayoutWrap: =false
      PaddingTop: =12
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
      RadiusTopLeft: =16
      RadiusTopRight: =16
      Visible: =varDrawerOpen
      Height: =340
      Width: =App.Width
      X: =0
      Y: =App.Height - 340
    Children:
      - imgDrawerHandle:
          Control: Image@2.2.3
          Properties:
            AlignInContainer: =AlignInContainer.Center
            FillPortions: =0
            LayoutMinWidth: =0
            Fill: =RGBA(203, 213, 225, 1)
            Image: =Blank()
            RadiusBottomLeft: =4
            RadiusBottomRight: =4
            RadiusTopLeft: =4
            RadiusTopRight: =4
            Height: =8
            Width: =100
      - conDrawerHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            FillPortions: =0
            LayoutMinWidth: =0
            DropShadow: =DropShadow.None
            Fill: =RGBA(0, 0, 0, 0)
            LayoutDirection: =LayoutDirection.Vertical
            LayoutJustifyContent: =LayoutJustifyContent.Start
            LayoutAlignItems: =LayoutAlignItems.Stretch
            LayoutGap: =4
            LayoutWrap: =false
            PaddingBottom: =4
            PaddingLeft: =20
            PaddingRight: =20
            PaddingTop: =16
            Height: =64
          Children:
            - lblDrawerTitle:
                Control: Label@2.5.1
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  FillPortions: =0
                  LayoutMinWidth: =0
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Size: =13
                  Text: ="Move Goal"
                  Height: =20
            - lblDrawerDescription:
                Control: Label@2.5.1
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  FillPortions: =0
                  LayoutMinWidth: =0
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Size: =10
                  Text: ="Set your daily activity goal."
                  Height: =18
      - conDrawerBody:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            FillPortions: =1
            LayoutMinWidth: =0
            LayoutMinHeight: =0
            DropShadow: =DropShadow.None
            Fill: =RGBA(0, 0, 0, 0)
            LayoutDirection: =LayoutDirection.Vertical
            LayoutJustifyContent: =LayoutJustifyContent.Start
            LayoutAlignItems: =LayoutAlignItems.Stretch
            LayoutGap: =0
            LayoutWrap: =false
            PaddingLeft: =20
            PaddingRight: =20
            PaddingTop: =8
          Children:
            - lblDrawerBody:
                Control: Label@2.5.1
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  FillPortions: =1
                  LayoutMinWidth: =0
                  LayoutMinHeight: =0
                  Color: =RGBA(51, 65, 85, 1)
                  Font: =Font.'Open Sans'
                  Size: =11
                  Text: ="Adjust your settings below, then confirm to apply the changes. This body area grows or shrinks automatically to fill the space between the header and the action buttons."
                  VerticalAlign: =VerticalAlign.Top
      - conDrawerFooter:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            FillPortions: =0
            LayoutMinWidth: =0
            DropShadow: =DropShadow.None
            Fill: =RGBA(0, 0, 0, 0)
            LayoutDirection: =LayoutDirection.Vertical
            LayoutJustifyContent: =LayoutJustifyContent.Start
            LayoutAlignItems: =LayoutAlignItems.Stretch
            LayoutGap: =8
            LayoutWrap: =false
            PaddingBottom: =16
            PaddingLeft: =20
            PaddingRight: =20
            PaddingTop: =8
            Height: =116
          Children:
            - btnDrawerConfirm:
                Control: Classic/Button@2.2.0
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  FillPortions: =0
                  LayoutMinWidth: =0
                  Align: =Align.Center
                  BorderStyle: =BorderStyle.None
                  Color: =RGBA(255, 255, 255, 1)
                  Fill: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  HoverColor: =RGBA(255, 255, 255, 1)
                  HoverFill: =RGBA(30, 41, 59, 1)
                  OnSelect: =Set(varDrawerOpen, false)
                  PressedFill: =RGBA(51, 65, 85, 1)
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =8
                  RadiusTopLeft: =8
                  RadiusTopRight: =8
                  Size: =11
                  Text: ="Submit"
                  Height: =44
            - btnDrawerCancel:
                Control: Classic/Button@2.2.0
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  FillPortions: =0
                  LayoutMinWidth: =0
                  Align: =Align.Center
                  BorderColor: =RGBA(226, 232, 240, 1)
                  BorderStyle: =BorderStyle.Solid
                  BorderThickness: =1
                  Color: =RGBA(15, 23, 42, 1)
                  Fill: =RGBA(255, 255, 255, 1)
                  Font: =Font.'Open Sans'
                  HoverBorderColor: =RGBA(203, 213, 225, 1)
                  HoverColor: =RGBA(15, 23, 42, 1)
                  HoverFill: =RGBA(248, 250, 252, 1)
                  OnSelect: =Set(varDrawerOpen, false)
                  PressedFill: =RGBA(241, 245, 249, 1)
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =8
                  RadiusTopLeft: =8
                  RadiusTopRight: =8
                  Size: =11
                  Text: ="Cancel"
                  Height: =44

Implementation

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

Something not pasting right? Troubleshooting guide

Drawer

Content

How to Use

Problem Solved

Integration

YAML Code

Implementation