1. Why Use a Modern Expandable Navigation Menu?
Navigation is one of the most important elements of any Power Apps application. As apps grow in size and include multiple screens, forms, and business processes, a simple collection of buttons quickly becomes difficult to manage. A modern expandable navigation menu solves this problem by organizing related pages into expandable sections, making the interface cleaner, more intuitive, and easier to navigate.
Power Apps now provides Modern Controls and Themes, allowing developers to create navigation menus that are not only visually appealing but also responsive and theme-aware. These controls automatically adapt to the selected app theme, support smooth hover effects, and provide a consistent Fluent Design experience across desktop, tablet, and mobile devices.
Another major advantage is responsiveness. By building the navigation inside responsive containers, the menu automatically adjusts to different screen sizes without requiring separate layouts for each device. Whether users access the app from a desktop computer or a mobile phone, the navigation remains organized, accessible, and easy to use.
In this tutorial, we’ll build a reusable navigation component with expandable submenus, dynamic navigation, responsive behavior, and role-based visibility using Modern Controls in Canvas Power Apps.
2. Setting Up the Responsive App and Navigation Structure
The first step is preparing the application to use Modern Controls. Open App Settings in Power Apps and enable Modern Controls and Themes under Upcoming Features. This unlocks modern UI components, theme-aware styling, and responsive behaviors that make it much easier to build professional-looking applications.
Next, create a blank Canvas App using a Responsive Layout. You can choose either a Blank Responsive Layout or a Sidebar Layout, depending on your design preference. Responsive layouts automatically resize and reposition controls based on the available screen size, ensuring the app works well on desktops, tablets, and mobile devices without manually adjusting every control.
To create the navigation menu, define a global navigation structure using an App Formula such as navStructure. Instead of hardcoding buttons on every screen, this formula stores all navigation information in a single array of objects. Each navigation item contains properties such as a unique key, the menu title, the destination screen, an icon, and an optional submenu containing child navigation items. Because every gallery and navigation component reads from this single data source, adding, removing, or updating menu items only requires editing the navStructure formula once, and the changes automatically appear throughout the entire application.
This data-driven approach makes the navigation menu easier to maintain, supports expandable parent-child menus, and provides the flexibility to implement features such as dynamic navigation, role-based visibility, and responsive layouts without rewriting navigation logic for every screen.
3. Building a Reusable Navigation Component
After creating the navigation structure, the next step is to build a reusable navigation component. Components in Power Apps allow you to create a control once and reuse it across multiple screens, making maintenance much easier. Create a new component, rename it to NavComponent, and enable Access app scope so it can read the global navStructure formula and other app-level variables.
Begin by designing the user profile section at the top of the component. Add an Image control and bind it to User().Image to display the current user’s profile picture. Beside it, place text labels that display the user’s full name using User().FullName and department information retrieved through the Office 365 Users connector. To improve responsiveness, hide the profile details on smaller screens by displaying only the profile picture when the component width becomes limited.
Below the profile section, insert a Flexible Height Gallery and bind its Items property to the navStructure formula. Each gallery item represents one navigation option and automatically displays the title and icon stored in the navigation object. Configure the modern button inside the gallery to use the menu title and icon, while highlighting the currently active screen by comparing the selected screen with App.ActiveScreen and applying the app’s theme colors. This creates a clean, reusable navigation menu that automatically updates whenever the navigation structure changes, eliminating the need to edit multiple screens individually.
4. Creating Expandable Submenus and Responsive Navigation
To support hierarchical navigation, add a second Flexible Height Gallery inside the main navigation gallery. This nested gallery displays the submenu items stored within each navigation object’s submenu property. Instead of showing every submenu at once, control its visibility using a variable such as varSelectedMenu, which stores the currently expanded parent menu. When users click the corresponding chevron icon, the variable either expands or collapses the submenu, creating a smooth and organized navigation experience.
Each submenu button functions just like the main navigation items, allowing users to navigate directly to the associated screen while automatically closing the expanded menu after selection. To improve usability, display the chevron icon only for menu items that actually contain submenus, keeping the interface simple and uncluttered.
The navigation menu should also be fully responsive. By placing the component inside responsive containers, the layout automatically adjusts to different screen sizes. For example, on smaller mobile devices the navigation can switch to an icon-only layout, while larger screens display both icons and text labels. Additional enhancements, such as separators, gradient backgrounds, and theme-aware styling, help create a more polished appearance without sacrificing responsiveness.
Finally, role-based navigation can be implemented by adding a security property to each navigation object. Filtering the navStructure based on the current user’s role ensures that users only see the menu items they are authorized to access. This centralized approach makes navigation easier to maintain while improving both security and the overall user experience.
