A Beginner’s Guide to Modern Compact Side Menus in PowerApps
You can create a modern compact side menu in PowerApps using just a few clear steps. This modern control gives your app a sleek, professional look. When you create this menu, you use a gallery control as the backbone. The compact design lets you create a modern, collapsible side-navigation menu that adapts to light or dark themes. You do not need advanced coding to create this control. Instead, you use gallery control, image control, and button control to create a modern navigation experience. You can create custom properties for the control, add a logo, and use gallery control to display menu items. The control remains reusable, so you can create it once and use it in many apps. When you create the menu, you make sure the gallery control handles all the icons and navigation. The modern compact side menu uses a gallery control for structure, and you can create multiple visual states. You can control every detail, from icon color to the layout, by setting properties. The modern control lets you create a professional, user-friendly menu that improves every PowerApps project.
Key Takeaways
Use a gallery control to build a sleek, responsive side menu that adapts to light and dark themes.
Set up named formulas for colors and icons to keep your app fast, consistent, and easy to update.
Create reusable components with custom properties to easily change colors, icons, and menu items across apps.
Add clear visual feedback like active states and hover effects to improve user navigation and experience.
Design your menu inside responsive containers to ensure it works well on all devices and screen sizes.
Setup in PowerApps
Environment Preparation
To begin, you need to set up your environment before you create any custom control in PowerApps. Follow these steps to ensure a smooth start:
Install Visual Studio Code with the Add to PATH option.
Download and install Node.js (LTS version recommended).
Add the Microsoft Power Platform CLI extension to Visual Studio Code.
Install .NET build tools on your machine.
Create a new folder to hold your component project.
Open Visual Studio Code and launch a terminal window.
Navigate to your new folder in the terminal.
Run the command
pac pcf initwith your chosen namespace, control name, and template. This command also runsnpm installto fetch dependencies.Open the project folder in Visual Studio Code.
Build your control using the build commands or
npm run build.Package your control into a Dataverse solution and import it into PowerApps.
Tip: Setting up your environment properly ensures that every control you create will work seamlessly in PowerApps. You can reuse your setup for future projects, saving time and effort.
Named Formulas and Variables
When you create a modern gallery control, you want to keep your app fast and easy to maintain. Named formulas help you achieve this. You can define your color palette, themes, and SVG icons as named formulas. This approach lets you create a consistent look for every control and gallery control in your app.
Start by creating a structured color palette. Group your colors into Primary, Accent, and Neutral categories.
Use named formulas to store these colors. For example, you can create a formula for your primary color and reference it in every control and gallery control.
Store your SVG icons as text or base64 strings in named formulas. This makes it easy to create a gallery control that displays icons for each menu item.
Apply default styles, such as fonts and sizes, using named formulas. Reference these styles in every control you create.
Named formulas improve performance because PowerApps loads them instantly. You do not need to wait for variables to initialize. When you create a gallery control, you can reference these formulas directly, making your control more reliable and easier to update. This method also helps you create a reusable gallery control that you can use in any app.
Note: Avoid calling data sources in your named formulas. Use them only for static data like colors, icons, and styles. This keeps your gallery control fast and responsive.
Build Modern Compact Side Menu
Create the Component
You start by creating a reusable component for your modern compact side menu. Open PowerApps Studio and add a new component. Set the width to a compact value, such as 70 pixels, to keep the menu sleek and vertical. Set the height to match the screen for a full-length navigation experience. Use a vertical responsive container as the main structure. This approach helps you create responsive menu navigation bars that adjust to different screen sizes and layouts.
To create responsive menu navigation bar layouts, break down your app into smaller components. Each component should have a clear responsibility. For the side menu, focus on UI rendering and keep logic separate. This separation makes your control predictable and easy to test. When you create a responsive menu, use a gallery control to display menu items. The gallery control adapts to the number of items and keeps your vertical layout organized.
Tip: Responsive containers and galleries help you create responsive menu navigation bars that look great on any device. Even though PowerApps containers may not be as smooth as web containers, they still provide strong support for responsive design.
Add Icons and Logo
Next, add your branding and navigation elements. Place your logo at the top of the vertical container. Use an image control for the logo and set its size to fit the compact design. Below the logo, add a gallery control to display your menu items. The gallery control forms the backbone of your modern compact side menu. Each item in the gallery control represents a navigation option.
For icons, use SVG icons instead of static images. SVG icons scale perfectly and remain crisp at any size. You can recolor and resize SVGs directly in PowerApps, which keeps your app modern and lightweight. Store your SVG icon data in named formulas or collections. This method lets you build a large icon library without increasing your app size. When you add a gallery control, bind it to your menu items table, which includes icon data, menu names, and navigation targets.
At the bottom of the vertical container, add a user profile image. Use another image control and set it to display the current user's picture. This layout—logo at the top, menu in the middle, and user image at the bottom—creates a balanced and modern compact side menu.
Note: SVG icons integrate seamlessly with PowerApps controls. They provide high-quality visuals and keep your responsive menu navigation bar efficient.
Use Custom Properties
To make your modern compact side menu reusable and adaptable, use custom properties. Custom properties let you pass colors, fonts, icons, and layout settings into your component. This flexibility allows you to create responsive menu navigation bars that match any app theme.
Set up custom properties for:
Navigation background color
Logo image
Icon colors (default and selected)
Hover and press effects
Menu content (table of menu items)
Current selected menu item
Padding and spacing
Custom properties support theming and layout adjustments. You can change the look of your control without editing the component itself. For example, you can switch between light and dark themes by passing different color values. You can also update the menu content by passing a new table of items.
When you create responsive menu navigation bars, custom properties ensure visual consistency and easy updates. You can insert your control on multiple screens and adjust its appearance with just a few property changes. This approach helps you create a collapsible side-navigation menu or even a multi-level menu by updating the menu content and layout properties.
Pro Tip: Use custom properties to centralize style management. This method reduces duplication and keeps your modern compact side menu consistent across all your apps.
By following these steps, you create a modern compact side menu that is sleek, responsive, and easy to maintain. You use gallery control, responsive containers, SVG icons, and custom properties to create a responsive menu navigation bar that enhances user experience. You can now create a collapsible menu or expand your navigation as your app grows.
Visual Indicators and Interactivity
A modern compact side menu in PowerApps stands out when you use clear visual indicators. These indicators help users understand which part of the menu is active and guide them through your app. You can achieve this by combining background color, icon color, and icon type. Each element in your gallery control should respond to user actions and reflect the current state of the control.
Active State Styling
You want users to know which menu item is active at a glance. Set the background color of the active item in your gallery control to a distinct shade. This color should contrast with the rest of the menu. Use a custom property in your control to manage this color. When you update the currentMenuID property, the gallery control highlights the selected item. This approach works well in both light and dark themes. The modern design ensures that users always see which part of the menu they are using.
Tip: Use your brand’s accent color for the active state. This reinforces your app’s identity and helps users focus on important actions.
Icon Color and Type
Icon color and type play a big role in usability. In your gallery control, use a different icon color for the active menu item. For example, you can set the selected icon to a bright color and keep inactive icons neutral. This method draws attention to the current selection. You can also switch between outline and filled icon types. When a menu item is active, display the filled version of the icon. For inactive items, show the outline version. This visual cue helps users recognize their location in the menu.
Color and contrast help important elements stand out in your control.
Consistent icon styles in your gallery control prevent confusion.
Grouping similar icons and colors in your menu improves perception.
Sufficient contrast in your control supports accessibility.
A modern gallery control benefits from these practices. Users find it easier to navigate and understand the structure of your menu.
Button Feedback
Every control in your modern menu should provide feedback when users interact with it. In your gallery control, set up hover and press effects for each button. Use custom properties to manage these effects. For example, you can change the background color slightly when a user hovers over a menu item. When a user presses a button, the gallery control can show a deeper shade. This feedback reassures users that the control is responsive.
These visual signals in your modern gallery control help users feel confident as they use your menu. By managing all visual states with custom properties, you ensure your control adapts to both light and dark themes. This approach keeps your modern menu consistent and user-friendly across every app.
Navigation and Integration
Screen Linking
You want your users to move smoothly between screens in your app. To achieve this, you connect your side menu actions to screen navigation using the gallery control and button controls. Start by creating a collection that holds your menu items. Each item should include a title, an icon, and the name of the screen it links to. Set the Items property of your gallery control to this collection. This approach lets you manage your navigation structure in one place.
Add a label and an icon inside each gallery control item. Bind the label to the menu title and the icon to the menu image. Set the OnSelect property of the gallery control item or its button to the Navigate function. This function takes the user to the correct screen when they select a menu item. You can adjust the visual properties of each control to make the navigation clear and user-friendly.
Tip: Use clear labels and familiar icons in your gallery control. This helps users recognize each menu option quickly.
Responsive Layout
A modern app must look good on every device. You achieve this by building a responsive menu navigation bar using container controls and dynamic sizing. Place your side menu component inside a responsive container. Set the Width and Height properties of each control based on the parent container’s dimensions. This ensures your gallery control and other controls resize automatically.
Turn off the 'Scale to fit' setting in PowerApps. This allows your app to adapt to different screen sizes and orientations. Use formulas to adjust the layout of your responsive menu navigation bar. For example, you can change the menu from vertical to horizontal based on the device’s orientation. Set breakpoints to show or hide controls depending on the screen size.
Test your app on multiple devices. Check that your gallery control, menu, and navigation actions work as expected. Make sure your responsive menu navigation bar remains easy to use on both large screens and mobile devices. Consistent navigation and control layout improve the user experience across your entire app.
Note: Always group related controls in containers. This keeps your layout organized and makes your responsive menu navigation bar easier to maintain.
Building a modern compact side menu in PowerApps transforms your app’s user experience. You improve navigation by using a single control that centralizes updates and ensures consistency. The gallery control lets you create sleek, responsive layouts that adapt to any theme. You can customize every control property, from icon color to menu width, making your gallery control flexible for any project. Try adding advanced features to your control, such as collapsible or multi-level menus, which many PowerApps users request:
Collapsible menus with dynamic width in your gallery control
Multi-level navigation using custom properties in your control
Expand/collapse toggles for your gallery control to save space
Maintain your control easily by updating the central component, so every gallery control across your app stays current. Explore tutorials and join the PowerApps community to master every control and gallery control technique.
FAQ
How do you make your side menu control reusable across different apps?
You create a component for your side menu control. Set up custom properties for colors, icons, and menu content. This approach lets you use the same control in multiple apps. You only need to update the control’s properties to match each app’s style.
Can you update the menu items in the gallery control without editing the component?
Yes. You pass a table of menu items to the gallery control using a custom property. This method allows you to change the navigation structure quickly. You do not need to modify the control itself. The gallery control updates automatically.
What is the best way to manage icon colors in your control?
Store your color values in named formulas. Reference these formulas in your control’s properties. This setup ensures that every icon in your gallery control uses the correct color. You can switch between light and dark themes by updating the color formulas.
How do you handle navigation between screens using the gallery control?
Assign the Navigate function to the OnSelect property of each item in your gallery control. Each menu item links to a specific screen. When users select an item, the control takes them to the correct screen. This keeps navigation simple and reliable.
Does the control support both light and dark themes?
Yes. You design your control with custom properties for theme colors. When you switch themes, the control updates its appearance automatically. The gallery control and all icons adapt to the selected theme, providing a consistent user experience.
Tip: Always test your control in both themes to ensure visual consistency.