Navigation & Pagination

Simple Pagination

Added Aug 13, 2026

A single row of 5 numbered pagination links, one shown active. No Previous/Next arrows or ellipsis. Inspired by the shadcn/ui PaginationSimple composition.

CopySnips Live Preview

How to Use

No settings: this component needs none. The default active page (3) and every visual/behavioral detail are fixed in the YAML; edit btnSimplePaginationHit's Coalesce(varPaginationSelected, 3) directly in the pasted YAML if you want a different default active page. Clicking a different page number in the Preview live-updates which one looks active (via varPaginationSelected).
Paste the YAML into Power Apps Studio (Ctrl+V). One control is added: galSimplePagination, a single Horizontal Gallery, no wrapping container.
The 5 page numbers come from Sequence(5), not a hand-written array. There's no other per-page data to carry, so ThisItem.Value (a plain number) is all each row needs. If you need more or fewer pages, change Sequence(5) to Sequence(N) and adjust galSimplePagination.Width to match (N × 40).
The active page look is a border ring only (RadiusTopLeft/etc + BorderColor), never a Fill, but hovering ANY page still shows a solid light grey HoverFill safely, since each button's page number 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; inactive pages rely on the HoverFill alone.
No OnVisible initialisation needed: varPaginationSelected reads as Blank() until the first click, and Coalesce(varPaginationSelected, 3) falls back to page 3 until then.

Problem Solved

Provides a ready-made simple numbered pagination row (Power Apps has no native pagination control) with a default active page and live click-to-select behavior, built from a single Gallery instead of 5 hand-placed buttons.

Integration

Wire btnSimplePaginationHit.OnSelect to also update/refresh whatever data-bound content this pagination controls, once connected. Right now it only updates its own active-page visual.

- galSimplePagination:
    Control: Gallery@2.15.0
    Variant: Horizontal
    Properties:
      DelayItemLoading: =false
      Height: =36
      Items: =Sequence(5)
      ShowScrollbar: =false
      TemplatePadding: =0
      TemplateSize: =40
      Width: =200
      X: =20
      Y: =20
    Children:
      - btnSimplePaginationHit:
          Control: Classic/Button@2.2.0
          Properties:
            BorderColor: =If(ThisItem.Value = Coalesce(varPaginationSelected, 3), 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.TemplateHeight - 2
            HoverBorderColor: =Self.BorderColor
            HoverColor: =Self.Color
            HoverFill: =RGBA(241, 245, 249, 1)
            OnSelect: =Set(varPaginationSelected, ThisItem.Value)
            PressedBorderColor: =Self.BorderColor
            PressedFill: =RGBA(226, 232, 240, 1)
            RadiusBottomLeft: =6
            RadiusBottomRight: =6
            RadiusTopLeft: =6
            RadiusTopRight: =6
            Size: =10
            Text: =Text(ThisItem.Value)
            Width: =Parent.TemplateWidth - 4
            X: =2

Implementation

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

Something not pasting right? Troubleshooting guide

Simple Pagination

How to Use

Problem Solved

Integration

YAML Code

Implementation