Overlays & Menus

Drawer Right Panel

Added Aug 9, 2026

A right-anchored side panel with a radio-selectable list: pick one option (with an optional badge and description per row), then confirm. Built with Horizontal/Vertical AutoLayout sections and a full-height, screen-responsive panel. Inspired by the shadcn/ui Drawer (right direction) component.

CopySnips Live Preview

How to Use

On the Settings tab, edit the trigger/title/description/button text, and the Options list: each option has a Title, an optional Description, and an optional Badge (leave the badge blank to hide the pill on that row). 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: btnDrawerRightTrigger (opens it), btnDrawerRightOverlay (a dimmed full-screen backdrop, click it to close), and conDrawerRightPanel (the sliding panel itself). They are NOT nested, the same pattern as every trigger+panel component in this library.
conDrawerRightPanel is right-anchored and full height: Height:=App.Height and X:=App.Width-380 track whatever screen it's pasted into (Width itself is a fixed 380px, a deliberate design choice for a side rail, not screen-size-driven). Every section (header, footer) is a Vertical AutoLayout GroupContainer with AlignInContainer:=Stretch.
Click a row to select it (only one at a time). Selection is stored as plain text in varDrawerRightSelected (the option's Title). Selected rows get a persistent light tint and a filled radio dot; nothing is pre-selected by default.
Click Confirm to close and show a confirmation toast (Notify()); if nothing is selected yet, it shows a warning toast instead and stays open. Click Cancel or the dimmed backdrop to close without confirming.
This is the right-side variant only. Top/left/bottom directions aren't included (see the separate Drawer component for the bottom-sheet version). No OnVisible initialisation needed.

Problem Solved

Provides a right-anchored side panel for picking one option from a list (with rich per-row content: title, badge, description), a common pattern for filters, settings, or slot pickers that Power Apps has no native equivalent for.

Integration

The website builds a Power Fx array-of-records literal from your Options list and bakes it into the copied YAML as galDrawerRightList.Items (columns: Label, Description, Badge). Read the chosen option from varDrawerRightSelected. To swap the option list for a real data source later, replace the array in galDrawerRightList.Items with a table/collection reference that has matching Label/Description/Badge columns.

- btnDrawerRightTrigger:
    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(varDrawerRightOpen, 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
- btnDrawerRightOverlay:
    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(varDrawerRightOpen, false)
      PressedFill: =RGBA(0, 0, 0, 0.5)
      Text: =""
      Visible: =varDrawerRightOpen
      Height: =App.Height
      Width: =App.Width
      X: =0
      Y: =0
- conDrawerRightPanel:
    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
      RadiusBottomLeft: =16
      RadiusBottomRight: =0
      RadiusTopLeft: =16
      RadiusTopRight: =0
      Visible: =varDrawerRightOpen
      Height: =App.Height
      Width: =380
      X: =App.Width - 380
      Y: =0
    Children:
      - conDrawerRightHeader:
          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: =12
            PaddingLeft: =20
            PaddingRight: =20
            PaddingTop: =20
            Height: =72
          Children:
            - lblDrawerRightTitle:
                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: ="Pick a delivery time"
                  Height: =20
            - lblDrawerRightDescription:
                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: ="We'll prepare your order as soon as possible."
                  Height: =32
                  VerticalAlign: =VerticalAlign.Top
      - conDrawerRightBody:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            FillPortions: =1
            LayoutMinWidth: =0
            LayoutMinHeight: =0
            DropShadow: =DropShadow.None
            Fill: =RGBA(0, 0, 0, 0)
          Children:
            - galDrawerRightList:
                Control: Gallery@2.15.0
                Variant: Vertical
                Properties:
                  DelayItemLoading: =false
                  Fill: =RGBA(255, 255, 255, 1)
                  Items: =[{Label:"Standard delivery",Description:"25–35 min · Driver assigned now",Badge:"Fastest"}, {Label:"5:00 PM – 5:15 PM",Description:"Prep starts at 4:45 PM",Badge:""}, {Label:"5:30 PM – 5:45 PM",Description:"Good if you're heading home",Badge:""}, {Label:"6:00 PM – 6:15 PM",Description:"Most popular · High demand",Badge:""}, {Label:"6:30 PM – 6:45 PM",Description:"Last slot before kitchen closes",Badge:""}]
                  ShowScrollbar: =true
                  TemplatePadding: =0
                  TemplateSize: =64
                  Height: =Parent.Height
                  Width: =Parent.Width
                  X: =0
                  Y: =0
                Children:
                  - conDrawerRightTitleRow:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        DropShadow: =DropShadow.None
                        Fill: =RGBA(0, 0, 0, 0)
                        LayoutDirection: =LayoutDirection.Horizontal
                        LayoutJustifyContent: =LayoutJustifyContent.Start
                        LayoutAlignItems: =LayoutAlignItems.Center
                        LayoutGap: =8
                        LayoutWrap: =false
                        Height: =20
                        Width: =270
                        X: =12
                        Y: =8
                      Children:
                        - lblDrawerRightItemTitle:
                            Control: Label@2.5.1
                            Properties:
                              AlignInContainer: =AlignInContainer.Center
                              FillPortions: =1
                              LayoutMinWidth: =0
                              Color: =RGBA(15, 23, 42, 1)
                              Font: =Font.'Open Sans'
                              FontWeight: =FontWeight.Semibold
                              Size: =11
                              Text: =ThisItem.Label
                        - conDrawerRightBadgeWrap:
                            Control: GroupContainer@1.5.0
                            Variant: ManualLayout
                            Properties:
                              AlignInContainer: =AlignInContainer.Center
                              FillPortions: =0
                              LayoutMinWidth: =0
                              DropShadow: =DropShadow.None
                              Fill: =RGBA(0, 0, 0, 0)
                              Visible: =!IsBlank(ThisItem.Badge)
                              Height: =18
                              Width: =64
                            Children:
                              - imgDrawerRightBadgeBg:
                                  Control: Image@2.2.3
                                  Properties:
                                    Fill: =RGBA(241, 245, 249, 1)
                                    Image: =Blank()
                                    RadiusBottomLeft: =9
                                    RadiusBottomRight: =9
                                    RadiusTopLeft: =9
                                    RadiusTopRight: =9
                                    Height: =18
                                    Width: =64
                                    X: =0
                                    Y: =0
                              - lblDrawerRightBadgeText:
                                  Control: Label@2.5.1
                                  Properties:
                                    Align: =Align.Center
                                    Color: =RGBA(71, 85, 105, 1)
                                    Font: =Font.'Open Sans'
                                    Size: =8
                                    Text: =ThisItem.Badge
                                    VerticalAlign: =VerticalAlign.Middle
                                    Height: =18
                                    Width: =64
                                    X: =0
                                    Y: =0
                  - lblDrawerRightItemDescription:
                      Control: Label@2.5.1
                      Properties:
                        Color: =RGBA(100, 116, 139, 1)
                        Font: =Font.'Open Sans'
                        Size: =9
                        Text: =ThisItem.Description
                        Height: =16
                        Width: =270
                        X: =12
                        Y: =32
                  - imgDrawerRightRadioRing:
                      Control: Image@2.2.3
                      Properties:
                        BorderColor: =If(ThisItem.Label = varDrawerRightSelected, RGBA(15, 23, 42, 1), RGBA(203, 213, 225, 1))
                        BorderThickness: =2
                        Fill: =RGBA(255, 255, 255, 1)
                        Image: =Blank()
                        RadiusBottomLeft: =10
                        RadiusBottomRight: =10
                        RadiusTopLeft: =10
                        RadiusTopRight: =10
                        Height: =20
                        Width: =20
                        X: =304
                        Y: =22
                  - imgDrawerRightRadioDot:
                      Control: Image@2.2.3
                      Properties:
                        Fill: =RGBA(15, 23, 42, 1)
                        Image: =Blank()
                        RadiusBottomLeft: =5
                        RadiusBottomRight: =5
                        RadiusTopLeft: =5
                        RadiusTopRight: =5
                        Visible: =ThisItem.Label = varDrawerRightSelected
                        Height: =10
                        Width: =10
                        X: =309
                        Y: =27
                  - btnDrawerRightItemHit:
                      Control: Classic/Button@2.2.0
                      Properties:
                        Align: =Align.Left
                        BorderColor: =RGBA(0, 0, 0, 0)
                        BorderStyle: =BorderStyle.None
                        Color: =RGBA(0, 0, 0, 0)
                        DisabledBorderColor: =RGBA(226, 232, 240, 1)
                        Fill: =If(ThisItem.Label = varDrawerRightSelected, RGBA(248, 250, 252, 0.6), RGBA(0, 0, 0, 0))
                        FocusedBorderColor: =RGBA(0, 0, 0, 0)
                        FocusedBorderThickness: =0
                        Font: =Font.'Open Sans'
                        HoverBorderColor: =RGBA(0, 0, 0, 0)
                        HoverColor: =RGBA(0, 0, 0, 0)
                        HoverFill: =RGBA(241, 245, 249, 0.6)
                        OnSelect: =Set(varDrawerRightSelected, ThisItem.Label)
                        PressedBorderColor: =RGBA(0, 0, 0, 0)
                        PressedFill: =RGBA(226, 232, 240, 0.6)
                        Text: =""
                        Height: =64
                        Width: =Parent.Width
                        X: =0
                        Y: =0
            - lblDrawerRightEmpty:
                Control: Label@2.5.1
                Properties:
                  Align: =Align.Center
                  Color: =RGBA(148, 163, 184, 1)
                  Font: =Font.'Open Sans'
                  Size: =10
                  Text: ="No options available."
                  VerticalAlign: =VerticalAlign.Middle
                  Visible: =CountRows(galDrawerRightList.AllItems) = 0
                  Height: =44
                  Width: =Parent.Width
                  X: =0
                  Y: =12
      - conDrawerRightFooter:
          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:
            - btnDrawerRightConfirm:
                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: '=If(!IsBlank(varDrawerRightSelected), Set(varDrawerRightOpen, false); Notify("Delivery time confirmed: " & varDrawerRightSelected, NotificationType.Success), Notify("Please select a delivery time.", NotificationType.Warning))'
                  PressedFill: =RGBA(51, 65, 85, 1)
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =8
                  RadiusTopLeft: =8
                  RadiusTopRight: =8
                  Size: =11
                  Text: ="Confirm Delivery Time"
                  Height: =44
            - btnDrawerRightCancel:
                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(varDrawerRightOpen, 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 Right Panel

Content

Options

How to Use

Problem Solved

Integration

YAML Code

Implementation