App Shells for Power Apps

An app shell is the frame around a screen: where the navigation sits, where your content goes, and what happens on a phone. Every shell here pastes onto an existing screen as a few containers, reads the screen size through Parent.Width, and carries a theme switch. Every shell needs a Components, Ultra, Team or Lifetime plan.

Pick a variant

Component	Plan	YAML	What it is for	Settings you can change
Top Nav App Shell	Paid	Classic, Modern	Small internal tools with up to six sections, when a sidebar feels too heavy	Parts toggles, App name and logo icon, Tabs with label, icon and optional screen
Mobile App Shell	Paid	Classic, Modern	Frontline apps used on a phone: inspections, timesheets, deliveries	Parts toggles (header, app tile, theme switch, user, placeholder), App name and logo icon, up to five tabs
Portal App Shell	Paid	Classic, Modern	Self-service portals such as an IT request desk or an HR portal, with a centred column that never gets too wide	Parts toggles (plus page band), App name and logo icon, Subtitle and Primary action, Tabs
Split View App Shell	Paid	Classic, Modern	Helpdesk, CRM, approvals desk or inbox: list on the left, detail on the right	Parts toggles, App name and logo icon, List title and sample rows with title, subtitle and status, Rail icons
Sidebar App Shell	Paid	Classic, Modern	Desktop-first admin tools and dashboards; bottom tab bar on phones	Parts toggles (brand, theme switch, user, bottom tab bar, placeholder), App name and logo icon, Navigation items with label, icon, section switch and optional screen
Collapsible Sidebar App Shell	Paid	Classic, Modern	Dashboards where a wide table or chart needs the room: the sidebar folds to a 64 px icon rail	The same as Sidebar App Shell

Paid means a Components, Ultra, Team or Lifetime plan (pricing). Classic and Modern are the two Power Apps control sets you can pick from the Copy YAML button. Open the category in the library: App Shells.

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

After you paste

Click the screen in the Tree view and paste. The frame fills the screen; every size is a formula on the screen, so it fits phones, tablets and desktops. Put your own controls inside the content container and delete the placeholder labels. Paste the same shell on every screen, or build the app on one screen with containers that show and hide.

Each shell has its own global variables, named after the shell so two shells never fight. For the Sidebar App Shell they are gblShellNav (the number of the active item), gblShellPage (its label), gblShellDark (the theme switch), and for the collapsible one also gblRailShellRail. The other shells use TopShell, MobileShell, PortalShell and SplitShell as the stem. Names use your prefix settings.

Tapping a navigation item sets the number and the label. To show one page container at a time on a single screen:

// conHomePage, Visible
gblShellNav = 1

// conRequestsPage, Visible
gblShellNav = 2

To navigate to real screens instead, type the screen name into the Screen field of each item in Settings. The item then also runs Navigate(YourScreen). The screen must exist in the app before you paste, or Studio says the name is not recognized.

The theme switch flips the dark variable. Every surface color in the YAML is If(gblShellDark, dark, light), so the whole frame changes at once and your own controls can read the same variable. Switch the part off in Settings for plain colors in the preview theme.

// Your own control, Fill
If(gblShellDark, RGBA(21, 30, 48, 1), RGBA(255, 255, 255, 1))

Good to know

Below 768 px the sidebar or the tabs hide and a bottom tab bar with the first five items appears. The Mobile App Shell keeps the bottom bar at every size. Nothing to set in Power Apps for this, the formulas read Parent.Width.
The user footer and the avatars read User().FullName and User().Email. Nothing to connect.
The Split View App Shell keeps the selected row in gblSplitShellRow, a whole record. Its list is a gallery over a small sample table with a search filter; replace the Table in Items with your list and keep the columns title, subtitle and status, or rename them in the row labels.
The Portal App Shell's column is Min(960, Parent.Width - 48); change 960 once in the content container and the band labels.
Every shell has Classic and Modern YAML with the same layout.

Open the family in the library at App Shells. Related guides: Sidebars, Navigation Bars and Speed Dial.