App Shell (Sidebar + Top Bar)

The App Shell gives your Power App its complete skeleton in one paste: a sidebar with active-state navigation driven by a single varNav variable, a top bar that shows the current section, the signed-in user, and an empty content region ready for your components. Real containers and buttons — restyle, extend and make it responsive with one breakpoint variable.

Pro component

Subscribe to access this component and the full library.

View plans

My App

HomeRecordsSettings

Home

Your content here

YAML source

Preview — full code with PRO

# App Shell — PowerBlocks (PRO Screen, real controls)
# Sidebar + top bar + content region. Navigation state lives in varNav
# (registered by the nav buttons). Drop your content into ShellContent.
# RESPONSIVE: for mobile, add UpdateContext({ locIsMobile: Parent.Width < 768 })
# to Screen.OnVisible and collapse the sidebar with If(locIsMobile, 64, 240).

- AppShell:
    Control: GroupContainer
    Variant: ManualLayout
    Properties:
      X: =0
      Y: =0
      Width: =Parent.Width
      Height: =Parent.Height
# … full component definition unlocked with PRO

This is a partial preview. Unlock the full component →

More screens

PRO

Splash / Loading Screen

PRO

CRUD Screen (List + Detail)

PRO

Multi-Step Form (Wizard)

PRO

Kanban Board (Galleries)