App Shells for Power Apps

Complete app layouts that give your Power Apps a professional structure with sidebar navigation, headers, and responsive behavior.

What is an App Shell?

An app shell is the outer structure of your app - the sidebar, navigation, header, and main content area all working together. Instead of building this from scratch, you grab a ready-made shell and fill it with your content.

Responsive vs Static

PowerLibs offers two types of app shells:

Responsive App Shells

These adapt to screen size automatically:

• Desktop/Tablet: Shows a full sidebar with icons and labels
• Phone: Hides the sidebar and shows a bottom navigation bar instead

Perfect for apps used on both desktop and mobile devices.

Static App Shells

These keep the same layout regardless of screen size:

• Sidebar stays visible always
• Simpler to set up
• Best for desktop-only apps or when you control the device

Available App Shells

Responsive App Shell

The most versatile option. Sidebar on desktop, bottom nav on mobile.

Settings you can customize:

• App title and logo icon
• Navigation items with icons
• Sidebar width and colors
• Section headers for grouping items

Responsive Collapsible App Shell

Same as above but the sidebar can collapse to icons-only mode, giving users more screen space.

Extra features:

• Toggle button to expand/collapse
• Icons-only mode saves space
• Smooth animation on collapse

Responsive App Shell Dark & Light

Full responsive behavior plus automatic dark mode support.

Extra features:

• Detects system theme preference
• Theme toggle button included
• All colors adapt to dark/light mode

Static Sidebar App Shell

Simple fixed sidebar that doesn't respond to screen size.

Best for:

• Desktop-only apps
• Kiosk applications
• When you need guaranteed layout

Static Collapsible Sidebar App Shell

Fixed sidebar with collapse functionality.

App Shell Dark & Light Mode

Static layout with theme switching support.

Implementation Steps

1. Pick your shell type

Go to App Shells and choose based on your needs:

• Need mobile support? → Responsive variants
• Desktop only? → Static variants
• Dark mode? → Dark & Light variants
• Space-saving? → Collapsible variants

2. Configure navigation items

In the Settings tab, add your navigation items:

Each item has:

• Label - The text shown (e.g., "Dashboard")
• Icon - Choose from Power Apps built-in icons
• Custom Icon - Or paste SVG from PowerIcons.dev

You can also add Section Headers to group related items (like "Main" and "Workspace").

3. Set your colors

Customize:

• Sidebar background color
• Active item highlight color
• Text and icon colors
• Header background

4. Copy and paste YAML

Switch to the YAML tab and copy. Then in Power Apps Studio:

1. Right-click in Tree view
2. Select "Paste code"
3. The entire shell appears ready to use

5. Add OnStart code

App shells need some setup code. Check the Instructions tab for:

• OnStart formulas to initialize variables
• Screen navigation formulas
• Theme variables (for dark/light mode)

Connecting Navigation to Screens

After pasting, connect each nav item to navigate to screens:

// In the OnSelect property of a nav item
Set(varCurrentScreen, "Dashboard");
Navigate(DashboardScreen, ScreenTransition.None)

Or use the built-in navigation pattern:

// OnSelect for nav item
UpdateContext({varSelectedNav: "Dashboard"})

Then set your content visibility based on varSelectedNav.

Using Custom Icons

Default Power Apps icons are limited. For better icons:

1. Go to PowerIcons.dev
2. Find an icon you like
3. Copy the YAML code
4. In App Shell settings, set icon type to "Custom"
5. Paste the SVG code

Dark Mode Implementation

For dark/light mode app shells:

OnStart Setup

// Add to App.OnStart
Set(varDarkMode, false);
Set(varBgColor, If(varDarkMode, "#1a1a2e", "#ffffff"));
Set(varTextColor, If(varDarkMode, "#ffffff", "#1a1a2e"))

Theme Toggle

// Toggle button OnSelect
Set(varDarkMode, !varDarkMode);
Set(varBgColor, If(varDarkMode, "#1a1a2e", "#ffffff"));
Set(varTextColor, If(varDarkMode, "#ffffff", "#1a1a2e"))

Common Use Cases

Business Apps

Standard sidebar shell with sections for Dashboard, Reports, Settings.

Admin Panels

Collapsible shell to maximize data table space.

Mobile-First Apps

Responsive shell with bottom navigation optimized for thumbs.

Internal Tools

Static shell when you know everyone uses desktop.

Best Practices

• Keep nav items minimal - 5-7 items max before scrolling becomes awkward
• Use section headers - Group related items together
• Test on mobile - Even if you think it's desktop-only, someone will try it on a phone
• Match your branding - Set colors to match your company's style guide
• Consistent icons - Use either all default icons or all custom icons, not a mix

Troubleshooting

Navigation not working

Make sure you've added the OnSelect formulas to each navigation item. Check the Instructions tab for the exact code.

Layout breaks on mobile

If using a static shell on mobile, content gets squished. Switch to a responsive variant.

Dark mode colors not changing

Run OnStart after pasting. Right-click App → Run OnStart.

Custom icons showing as broken images

Custom icons only work with Classic controls. Check if Modern controls are selected and switch to Classic.

Sidebar too wide/narrow

Adjust the sidebarWidth setting. Default is 13% which works for most cases. Try 200px for a fixed width.