Tabs for Power Apps

A tab bar is a row of labelled buttons where one is highlighted and the screen shows the content that belongs to it. Every PowerLibs tab bar pastes as a container that follows the screen width, with equal-width transparent buttons and one image whose SVG draws the indicator and slides it from the old tab to the new one. The bar is only the bar: your own containers show and hide with the active tab. Tab Bar is free; the other variants need a Components, Ultra, Team or Lifetime plan.

Pick a variant

Component	Plan	What it is for	Settings you can change
Tab Bar	Free	A grey track with a white segment that slides; the everyday tab bar for a form or record page	Tabs (up to 6), Accent color
Tabs with Counts	Paid	Underline tabs with a number badge on each: Open 12, Waiting 3	Tabs with a count each, Accent color
Icon Tabs	Paid	An icon above a short label; record pages and phone toolbars	Tabs with an icon each (up to 5), Accent color
Vertical Tabs	Paid	Tabs down the left with a sliding highlight; settings screens, with your content to the right	Tabs (up to 8), Accent color
Chip Tabs	Paid	Separate outlined chips as wide as their labels; filters such as All, Open, Done	The same as Tab Bar
Segmented Tabs	Paid	An outlined track with dividers and a sliding brand block, the iOS segmented control	The same as Tab Bar
Underline Tabs	Paid	Labels on a baseline with a brand line that slides under the active one	The same as Tab Bar
Pill Tabs	Paid	A grey track with a brand pill that slides; two or three choices such as Monthly and Yearly	The same as Tab Bar

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Open the category in the library: Tabs.

To copy a variant into Power Apps Studio, follow Getting Started.

After you paste

Each tab bar keeps the active tab, 1-based, in its own context variable: varTabBar, varUnderlineTabs, varPillTabs, varChipTabs, varSegmentedTabs, varCountTabs, varIconTabs, varSideTabs. Two more variables per bar, ...Prev and ...Run, remember where the slide starts and make the image reload so it plays; you never touch them. Names use your prefix settings.

Show your own content for a tab, or filter a gallery by it:

// Your container for the second tab, Visible
varTabBar = 2

// A gallery under Chip Tabs
Filter(Requests, varChipTabs = 1 || Status = Switch(varChipTabs, 2, "Open", 3, "Waiting", "Done"))

Good to know

The bar's width is Min(tabs times a tab width, Parent.Width - 80), so it shrinks on a phone instead of running off the screen. Tabs share the width equally; keep labels to one or two words.
The indicator SVG counts in tabs, not pixels, so it lands on the right tab at any width. On a very narrow bar the pill corners stretch a little; that is the price of one image for every width.
Two bars of the same kind on one screen share the variables. Paste the second, then rename its variables in the buttons and in the image formula.
Tabs with Counts ships demo numbers; put CountRows(Filter(...)) into each badge for live counts.
Vertical Tabs beside your content needs a tablet or a desktop; use Icon Tabs or the Tab Bar on a phone.
Tab bars are Classic YAML only. Each tab is a transparent button with its own text and hover colours and the sliding indicator behind it; the Modern Button has no transparent fill and no hover colour control, so a Modern tab bar would lose the slide and the colours.

Open the family in the library at Tabs. Related guides: Sidebars and Navigation Bars.