Navigation & Pagination

Advanced Navigation

Added Aug 14, 2026

Previous/Next arrows plus 3 numbered page links and an ellipsis, one page shown active. Inspired by the shadcn/ui PaginationDemo composition.

⋯

CopySnips Live Preview

How to Use

No settings: this component needs none. The default active page (2) and every visual/behavioral detail are fixed in the YAML; edit each page button's Coalesce(varAdvNavSelected, 2) directly in the pasted YAML if you want a different default. Clicking a page number in the Preview live-updates which one looks active.
Paste the YAML into Power Apps Studio (Ctrl+V). One GroupContainer (conAdvNav) is added. Everything nests inside it via Horizontal AutoLayout.
Previous/Next are plain Buttons whose own Text combines a chevron + label ("‹ Previous" / "Next ›"). Classic/Button can't host a separate icon image alongside its own text, so this reuses the same proven "glyph inside Button.Text" technique as Navigation Menu's trigger chevrons.
The 3 page-number buttons and the ellipsis are individually hardcoded (btnAdvNavPage1/2/3, lblAdvNavEllipsis), not a Gallery, since this row genuinely needs different widths per cell (Previous/Next are wider than a page number), which a Gallery's single shared TemplateSize can't do. The ellipsis (lblAdvNavEllipsis) is a plain, non-interactive Label, matching real shadcn: it's not a link.
The active page look is a border ring only (RadiusTopLeft/etc + BorderColor), never a Fill, but hovering ANY page button still shows a solid light grey HoverFill safely, since each one's label is its own Text, not a separate control it could hide. HoverBorderColor/PressedBorderColor both read Self.BorderColor, so only the already-active page keeps a visible border through hover/press.
Previous/Next genuinely move the active page: clicking Next selects one page higher (clamped at page 3, the last real page button), Previous selects one page lower (clamped at page 1); there's no real "page 4" to advance to beyond that in this simplified 3-page+ellipsis view.
No OnVisible initialisation needed: varAdvNavSelected reads as Blank() until the first click, and Coalesce(varAdvNavSelected, 2) falls back to page 2 until then.

Problem Solved

Provides a ready-made fuller pagination row (Previous/Next plus numbered links and a truncation indicator) which Power Apps has no native equivalent for.

Integration

Wire each button's OnSelect to also refresh whatever data-bound content this pagination controls, once connected. Right now clicking Previous/Next/a page number only updates the active-page visual.

- conAdvNav:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =RGBA(0, 0, 0, 0)
      Height: =36
      LayoutAlignItems: =LayoutAlignItems.Stretch
      LayoutDirection: =LayoutDirection.Horizontal
      LayoutGap: =4
      Width: =348
      X: =20
      Y: =20
    Children:
      - btnAdvNavPrev:
          Control: Classic/Button@2.2.0
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            BorderColor: =RGBA(0, 0, 0, 0)
            BorderThickness: =1
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =0
            Font: =Font.'Open Sans'
            HoverBorderColor: =Self.BorderColor
            HoverColor: =Self.Color
            HoverFill: =RGBA(241, 245, 249, 1)
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            OnSelect: =Set(varAdvNavSelected, Max(1, Coalesce(varAdvNavSelected, 2) - 1))
            PressedBorderColor: =Self.BorderColor
            PressedFill: =RGBA(226, 232, 240, 1)
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            RadiusTopLeft: =6
            RadiusTopRight: =6
            Size: =10
            Text: ="‹ Previous"
            Width: =92
      - btnAdvNavPage1:
          Control: Classic/Button@2.2.0
          Properties:
            AlignInContainer: =AlignInContainer.Center
            BorderColor: =If(1 = Coalesce(varAdvNavSelected, 2), RGBA(226, 232, 240, 1), RGBA(0, 0, 0, 0))
            BorderThickness: =1
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =1
            Font: =Font.'Open Sans'
            Height: =Parent.Height - 2
            HoverBorderColor: =Self.BorderColor
            HoverColor: =Self.Color
            HoverFill: =RGBA(241, 245, 249, 1)
            OnSelect: =Set(varAdvNavSelected, 1)
            PressedBorderColor: =Self.BorderColor
            PressedFill: =RGBA(226, 232, 240, 1)
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            RadiusTopLeft: =6
            RadiusTopRight: =6
            Size: =10
            Text: ="1"
            Width: =36
      - btnAdvNavPage2:
          Control: Classic/Button@2.2.0
          Properties:
            AlignInContainer: =AlignInContainer.Center
            BorderColor: =If(2 = Coalesce(varAdvNavSelected, 2), RGBA(226, 232, 240, 1), RGBA(0, 0, 0, 0))
            BorderThickness: =1
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =1
            Font: =Font.'Open Sans'
            Height: =Parent.Height - 2
            HoverBorderColor: =Self.BorderColor
            HoverColor: =Self.Color
            HoverFill: =RGBA(241, 245, 249, 1)
            OnSelect: =Set(varAdvNavSelected, 2)
            PressedBorderColor: =Self.BorderColor
            PressedFill: =RGBA(226, 232, 240, 1)
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            RadiusTopLeft: =6
            RadiusTopRight: =6
            Size: =10
            Text: ="2"
            Width: =36
      - btnAdvNavPage3:
          Control: Classic/Button@2.2.0
          Properties:
            AlignInContainer: =AlignInContainer.Center
            BorderColor: =If(3 = Coalesce(varAdvNavSelected, 2), RGBA(226, 232, 240, 1), RGBA(0, 0, 0, 0))
            BorderThickness: =1
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =1
            Font: =Font.'Open Sans'
            Height: =Parent.Height - 2
            HoverBorderColor: =Self.BorderColor
            HoverColor: =Self.Color
            HoverFill: =RGBA(241, 245, 249, 1)
            OnSelect: =Set(varAdvNavSelected, 3)
            PressedBorderColor: =Self.BorderColor
            PressedFill: =RGBA(226, 232, 240, 1)
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            RadiusTopLeft: =6
            RadiusTopRight: =6
            Size: =10
            Text: ="3"
            Width: =36
      - lblAdvNavEllipsis:
          Control: Label@2.5.1
          Properties:
            Align: =Align.Center
            AlignInContainer: =AlignInContainer.Stretch
            Color: =RGBA(100, 116, 139, 1)
            Font: =Font.'Open Sans'
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            Size: =10
            Text: ="⋯"
            VerticalAlign: =VerticalAlign.Middle
            Width: =36
      - btnAdvNavNext:
          Control: Classic/Button@2.2.0
          Properties:
            AlignInContainer: =AlignInContainer.Stretch
            BorderColor: =RGBA(0, 0, 0, 0)
            BorderThickness: =1
            Color: =RGBA(15, 23, 42, 1)
            Fill: =RGBA(0, 0, 0, 0)
            FocusedBorderThickness: =0
            Font: =Font.'Open Sans'
            HoverBorderColor: =Self.BorderColor
            HoverColor: =Self.Color
            HoverFill: =RGBA(241, 245, 249, 1)
            LayoutMinHeight: =0
            LayoutMinWidth: =0
            OnSelect: =Set(varAdvNavSelected, Min(3, Coalesce(varAdvNavSelected, 2) + 1))
            PressedBorderColor: =Self.BorderColor
            PressedFill: =RGBA(226, 232, 240, 1)
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            RadiusTopLeft: =6
            RadiusTopRight: =6
            Size: =10
            Text: ="Next ›"
            Width: =92

Implementation

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

Something not pasting right? Troubleshooting guide

Advanced Navigation

How to Use

Problem Solved

Integration

YAML Code

Implementation