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.

Palette:

Original palette · works in every 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
    Variant: galleryHorizontal
    Properties:
      Items: =["Overview", "Activity", "Settings"]
      X: =40
      Y: =40
      Width: =480
      Height: =44
      TemplateSize: =150
      TemplatePadding: =0
    Children:
      - TabButton:
          Control: Classic/Button
          Properties:
            Text: =ThisItem.Value
            X: =0
            Y: =0
            Width: =148
            Height: =44
            Fill: =RGBA(0, 0, 0, 0)
            HoverFill: =RGBA(0, 0, 0, 0.04)
            # Default colors are readable on Power Apps' white canvas.
            # DARK background variant: active RGBA(255, 255, 255, 1),
            # inactive RGBA(156, 163, 175, 1), HoverFill RGBA(255, 255, 255, 0.04).
            Color: =If(Coalesce(varTab, "Overview") = ThisItem.Value, RGBA(17, 24, 39, 1), RGBA(107, 114, 128, 1))
            Size: =13
            FontWeight: =If(Coalesce(varTab, "Overview") = ThisItem.Value, FontWeight.Semibold, FontWeight.Normal)
            BorderThickness: =0
            OnSelect: =Set(varTab, ThisItem.Value)
      - TabUnderline:
          Control: Rectangle
          Properties:
            X: =0
            Y: =40
            Width: =148
            Height: =3
            Fill: =If(Coalesce(varTab, "Overview") = ThisItem.Value, RGBA(37, 99, 235, 1), RGBA(0, 0, 0, 0))

Common use cases

In-screen sections

Split a record's detail into Overview / Activity / Settings without extra screens.

Dashboards

Switch between report views from one bar.

Settings panels

Group options under tabs to keep a screen tidy.

How to use Tabs in Power Apps

1Add Set(varTab, "Overview") to Screen.OnVisible.
2Click "Copy YAML" — the syntax is invariant and works in every Power Apps locale.
3Paste the control onto your screen.
4Show each panel with Visible = (varTab = "Overview"), etc.

Tip — Drive both the tab bar and your panels from the same varTab variable so they always stay in sync.

Related navigation components

Nav Menu Horizontal

Top App Bar

Stepper

Sidebar Nav