Tabs for Power Apps

Add tab navigation to organize content into switchable sections. Tabs let users quickly move between related views without leaving the screen.

When to use tabs

Tabs work best when you have 2-6 related sections that users need to switch between frequently. They save screen space by showing only one section at a time while keeping others just a click away.

Choose your tab style

Tab Bar

Clean, minimal tabs with underline indicator. Simple and familiar design that works in any app.

Best for: Settings screens, profile pages, and general-purpose section switching. The neutral style fits any app design.

Settings you can customize:

• Tab labels (e.g., "General", "Password", "Settings")
• Number of tabs
• Default selected tab
• Colors and styling

Tab Bar V2

Modern tabs with blue underline indicator and horizontal layout. More prominent visual feedback than the basic Tab Bar.

Best for: Analytics dashboards, content sections, and apps that need clear visual hierarchy. Works great for data-heavy screens.

Settings you can customize:

• Tab labels
• Indicator color
• Tab count and layout
• Selected state styling

Pill Tabs

Modern pill-style tabs with dark background and rounded selection indicator. Eye-catching and contemporary.

Best for: Media apps, creative tools, and apps with a modern aesthetic. Great for photo/video/music category selection.

Settings you can customize:

• Tab labels
• Background and pill colors
• Rounded styling
• Hover effects

Segmented Tabs

Clean segmented control with light gray background and blue selected state. iOS-style design.

Best for: Settings panels, position selectors (Top/Bottom/Left/Right), and anywhere you need a clear toggle between options.

Settings you can customize:

• Segment labels
• Selected state color
• Background styling
• Border radius

Implementation steps

1. Select your tab style

Go to Tabs and pick the style that matches your app's design and use case.

2. Configure your tabs

Click on your chosen component and use the Settings tab to:

• Set tab labels - Name each tab clearly (e.g., "Photos", "Videos", "Music")
• Add/remove tabs - Adjust the number of tabs to match your sections
• Set default tab - Choose which tab is active when the screen loads

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect tab switching logic

After pasting, set up the logic to show different content based on the selected tab:

Track selected tab

// Store selected tab in a variable (on tab click)
Set(varSelectedTab, "General")

Show/hide content sections

// Set visibility of each content container
// General content - visible when varSelectedTab = "General"
varSelectedTab = "General"

// Password content - visible when varSelectedTab = "Password"
varSelectedTab = "Password"

Switch content with container

// Use Switch in a gallery or to control what displays
Switch(
    varSelectedTab,
    "General", "Show general settings here",
    "Password", "Show password form here",
    "Settings", "Show app settings here"
)

Navigate between screens (alternative)

// If tabs represent different screens instead of sections
Switch(
    SelectedTab,
    "Traffic", Navigate(TrafficScreen),
    "Content", Navigate(ContentScreen),
    "Speed", Navigate(SpeedScreen)
)

Common use cases

Settings screen

Use Tab Bar or Segmented Tabs to organize settings into "General", "Account", "Notifications", and "Privacy" sections.

User profile

Use Tab Bar V2 to switch between "Overview", "Activity", "Posts", and "Settings" on a profile page.

Media gallery

Use Pill Tabs to filter between "Photos", "Videos", and "Music" in a media browser.

Dashboard views

Use Tab Bar V2 to toggle between different data views like "Traffic", "Revenue", and "Engagement" charts.

Position selector

Use Segmented Tabs for options like "Top", "Bottom", "Left", "Right" in a layout settings panel.

Best practices

• Keep it to 2-6 tabs - More than 6 becomes overwhelming and hard to navigate
• Use short labels - "Settings" not "Application Settings Configuration"
• Order logically - Put most-used tabs first, or follow a natural flow (Overview → Details → Settings)
• Make tabs scannable - Users should understand each tab's content at a glance
• Consider icons - For very short labels, icons can help clarify meaning
• Keep content consistent - Each tab section should have similar density and layout

Troubleshooting

Tab click not switching content

Make sure you're setting a variable on tab click and using that variable to control content visibility. Both need to use the same variable name.

All content showing at once

Check that each content section has a Visible property that checks the selected tab variable (e.g., varSelectedTab = "General").

Selected tab not highlighting

Verify the tab component is connected to your state variable and the styling logic for the selected state is working.

Tabs cut off on mobile

Reduce the number of tabs or use shorter labels. Consider using icons instead of text for very narrow screens.