FREEnavigation

Tabs

Tabs give a Power Apps screen clean, in-page navigation: a horizontal bar of labels with a moving underline on the active tab, driven by a single variable. Read varTab anywhere to show or hide the matching content panel — a lightweight alternative to multiple screens.

Power Apps locale:

Paste directly into Power Apps Studio

Overview

Activity

Settings

YAML source

# Tabs — PowerBlocks (FREE)
# A horizontal tab bar with an active underline, driven by a variable.
# STEP 1 — Screen.OnVisible:  Set(varTab, "Overview");
# STEP 2 — Paste. Read the active tab anywhere with varTab; show/hide panels with it.

- Tabs:
    Control: Gallery@2.15.0
    Variant: Horizontal
    Properties:
      Items: =["Overview", "Activity", "Settings"]
      X: =40
      Y: =40
      Width: =480
      Height: =44
      TemplateSize: =150
      TemplatePadding: =0
    Children:
      - TabButton:
          Control: Button@2.2.0
          Properties:
            Text: =ThisItem.Value
            X: =0
            Y: =0
            Width: =148
            Height: =44
            Fill: =RGBA(0, 0, 0, 0)
            HoverFill: =RGBA(255, 255, 255, 0.04)
            Color: =If(varTab = ThisItem.Value, RGBA(255, 255, 255, 1), RGBA(156, 163, 175, 1))
            Size: =13
            FontWeight: =If(varTab = ThisItem.Value, FontWeight.Semibold, FontWeight.Normal)
            BorderThickness: =0
            OnSelect: =Set(varTab, ThisItem.Value)
      - TabUnderline:
          Control: Rectangle@2.3.0
          Properties:
            X: =0
            Y: =40
            Width: =148
            Height: =3
            Fill: =If(varTab = ThisItem.Value, RGBA(37, 99, 235, 1), RGBA(0, 0, 0, 0))