Navigation & Pagination

Modern Tabs

Added Aug 14, 2026

A 4-tab switcher: a pill-style TabsList (a single Gallery of triggers) above a Card panel (Title/Description/Content) that swaps per tab. Inspired by the shadcn/ui Tabs composition.

Summary

A quick snapshot of your workspace and recent activity.

3 projects need review and 7 tasks are due this week.

CopySnips Live Preview

How to Use

On the Settings tab, edit each of the 4 tabs' Trigger label, Card title, Card description, and Card content. The tab COUNT is fixed at 4; there's no add/remove control, only in-place editing. The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). One GroupContainer (conModernTabs) is added, containing a hidden data-source Gallery, a Horizontal Gallery of triggers (galModernTabsList), and the Card panel.
The 4 tabs' content is baked into galModernTabsSource.Items at copy-time (a Power Fx table literal). It's not editable inside the pasted app; pick your wording on the website before copying. Edit galModernTabsSource.Items directly in the pasted YAML if you want to hand-tweak it afterward.
Clicking a trigger sets varModernTabsActive to that row's Id (1-4); every other control (every trigger's own styling via ThisItem.Id, and the Card's Title/Description/Content) reads that same variable, so nothing else needs wiring.
No OnVisible/OnStart initialisation needed: every read of varModernTabsActive goes through Coalesce(varModernTabsActive, 1), so tab 1 is active by default before any click.

Problem Solved

Provides a ready-made tabbed switcher. Power Apps has no native Tabs control, so this reuses a proven Gallery-as-data-source + Horizontal-Gallery-of-triggers + Classic/Button active-state pattern (the same shape Simple Pagination uses for its page-number row) instead of a Timer, Collection mutation, or per-tab hardcoded controls.

Integration

Purely presentational: swap each tab's Card content for real data-bound controls once connected (e.g. replace lblModernTabsContent.Text with a formula reading your own data source, guarded by the same Coalesce(varModernTabsActive, 1) = ThisItem.Id / N check already used for the trigger styling).

- conModernTabs:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      DropShadow: =DropShadow.None
      Height: =180
      Width: =402
      X: =20
      Y: =20
    Children:
      - galModernTabsSource:
          Control: Gallery@2.15.0
          Variant: Vertical
          Properties:
            DelayItemLoading: =false
            Height: =1
            Items: =[{Id:1,Label:"Summary",Title:"Summary",Description:"A quick snapshot of your workspace and recent activity.",Content:"3 projects need review and 7 tasks are due this week."}, {Id:2,Label:"Performance",Title:"Performance",Description:"Track engagement trends and spot growth opportunities.",Content:"Weekly visits increased by 18% since your last check-in."}, {Id:3,Label:"Exports",Title:"Exports",Description:"Build and download reports in the format you need.",Content:"4 export-ready reports are waiting in your queue."}, {Id:4,Label:"Preferences",Title:"Preferences",Description:"Adjust your workspace defaults and account options.",Content:"Update alerts, login security, and appearance from here."}]
            TemplateSize: =1
            Visible: =false
            Width: =1
      - conModernTabsList:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            DropShadow: =DropShadow.None
            Fill: =RGBA(241, 245, 249, 1)
            Height: =36
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Width: =402
          Children:
            - galModernTabsList:
                Control: Gallery@2.15.0
                Variant: Horizontal
                Properties:
                  DelayItemLoading: =false
                  Height: =28
                  Items: =galModernTabsSource.AllItems
                  ShowScrollbar: =false
                  TemplatePadding: =0
                  TemplateSize: =100
                  Width: =400
                  Y: =4
                Children:
                  - btnModernTabHit:
                      Control: Classic/Button@2.2.0
                      Properties:
                        BorderColor: =RGBA(0, 0, 0, 0)
                        BorderThickness: =1
                        Color: =If(ThisItem.Id = Coalesce(varModernTabsActive, 1), RGBA(15, 23, 42, 1), RGBA(100, 116, 139, 1))
                        Fill: =If(ThisItem.Id = Coalesce(varModernTabsActive, 1), RGBA(255, 255, 255, 1), RGBA(0, 0, 0, 0))
                        FocusedBorderThickness: =0
                        Font: =Font.'Open Sans'
                        FontWeight: =If(ThisItem.Id = Coalesce(varModernTabsActive, 1), FontWeight.Semibold, FontWeight.Normal)
                        Height: =28
                        HoverBorderColor: =RGBA(0, 0, 0, 0)
                        HoverColor: =RGBA(15, 23, 42, 1)
                        HoverFill: =If(ThisItem.Id = Coalesce(varModernTabsActive, 1), RGBA(255, 255, 255, 1), RGBA(255, 255, 255, 0.6))
                        OnSelect: =Set(varModernTabsActive, ThisItem.Id)
                        PressedFill: =RGBA(255, 255, 255, 0.85)
                        RadiusBottomLeft: =6
                        RadiusBottomRight: =6
                        RadiusTopLeft: =6
                        RadiusTopRight: =6
                        Size: =10
                        Text: =ThisItem.Label
                        Width: =100
      - conModernTabsCard:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            BorderColor: =RGBA(226, 232, 240, 1)
            BorderThickness: =1
            DropShadow: =DropShadow.None
            Fill: =RGBA(255, 255, 255, 1)
            Height: =130
            RadiusBottomLeft: =8
            RadiusBottomRight: =8
            RadiusTopLeft: =8
            RadiusTopRight: =8
            Width: =398
            Y: =48
          Children:
            - lblModernTabsTitle:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =30
                  Size: =12
                  Text: =Index(galModernTabsSource.AllItems, Coalesce(varModernTabsActive, 1)).Title
                  Width: =368
                  X: =16
                  Y: =10
            - lblModernTabsDescription:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Height: =35
                  Size: =11
                  Text: =Index(galModernTabsSource.AllItems, Coalesce(varModernTabsActive, 1)).Description
                  Width: =368
                  X: =16
                  Y: =45
            - lblModernTabsContent:
                Control: Label@2.5.1
                Properties:
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Height: =35
                  Size: =11
                  Text: =Index(galModernTabsSource.AllItems, Coalesce(varModernTabsActive, 1)).Content
                  Width: =368
                  X: =16
                  Y: =80

Implementation

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

Something not pasting right? Troubleshooting guide

Modern Tabs

Tabs

How to Use

Problem Solved

Integration

YAML Code

Implementation