How to Build a Modern Collapsible Menu in PowerApps
You can change your app with a modern collapsible menu in PowerApps. This feature helps you make your app look neat. It also gives every user a better experience. When you use a modern collapsible menu, you make it easy to move around the app. You also save space on your screen. Many users want their app to look new and work well. This is true if you make a task management app or something else. Try different menu layouts and see how your app looks and feels.
Key Takeaways
Collapsible menus in PowerApps help save space on the screen. They also make it easy for everyone to move around the app.
Build your menu using containers, galleries, variables, and custom properties. This helps you make a menu that is flexible and looks modern. Add buttons to expand or collapse the menu.
Use variables to control these buttons. This lets you switch between just icons or icons with labels.
Make sure your menu can change size and shape. This way, it works well on desktops, tablets, and phones.
You can also change your menu to have light or dark mode. Use clear colors and add features for people with disabilities. This makes the app better for everyone.
Modern Collapsible Menu Basics
Why Use Collapsible Menus
When you build apps in PowerApps, you want users to find what they need quickly. Collapsible menus help you do this. These menus let you hide or show options as needed. You save space on the screen, which is important for both desktop and mobile devices. Users can focus on their tasks without distractions. A modern collapsible menu also makes your app look clean and up-to-date.
You improve accessibility when you use collapsible menus. Some users like to see all menu items at once. Others want a simple view with only icons. You can give both groups what they want. This flexibility helps everyone use your app with ease. When you create a new canvas app, you want it to work well for all users. Collapsible menus help you reach that goal.
You should also think about how your menu fits into the rest of your app. Good menus follow Power Platform architecture principles. They use clear names and global variables. This makes your app easier to update and maintain. If you plan to reuse your menu in other apps, you can turn it into a component. This saves you time and keeps your design consistent.
Key Components
To build a modern collapsible menu in PowerApps, you need to use the right controls and properties. Here are the main parts you will use:
Containers: These help you group menu items and control layout. Responsive containers adjust to different screen sizes.
Galleries: Use galleries to list menu options. You can add icons and labels for each item.
Variables: Variables let you track if the menu is expanded or collapsed. You can also use them for the current menu selection.
Custom Properties: These make your canvas app components flexible. You can pass colors, icons, and other settings to your menu.
Images and SVGs: Add icons and logos to make your menu look modern.
Buttons: Use buttons for menu actions, like expanding or collapsing the menu.
Tip: When you design menus, think about the device your users will use. A menu that works well on a desktop might need changes for a phone. Always test your menus on different devices.
Menus in power apps canvas apps can use reusable components. This helps you follow the DRY principle. You spend less time fixing bugs and more time building new features. Good naming and clear structure make your menus easy to understand. When you use these key components, you create menus that look great and work well in any app.
Building a Collapsible Menu
Menu Container
To start, make a new component in PowerApps. Give it a name like SideNav_Collapsable. This part will keep all your menu items and controls together. Custom properties help you change how your menu works. For example, you can add things like MenuContent, hover fill, pressed fill, CurrentMenuID, SelectedIconBG, and BaseIconColor. These settings make your menu easy to change and update.
Here are the steps for your menu container:
Make a new component and name it clearly.
Add custom properties for menu content, colors, and selection.
Put a gallery inside the component. Set the Items property of the gallery to your MenuContent property.
Inside the gallery, add two containers. In the second one, put a text label, a button, and an image.
Add another container above the gallery for your expand and collapse button.
Tip: Use responsive containers so your menu looks good on any device.
Menu Items and Icons
When you add menu options, you want them to look nice and simple. The gallery control is great for showing your menu items. Each item in the gallery can have an icon and a label. This means you add pictures and words. You can use SVG images or Fluent UI icons to make it look clean.
The ExpandMenu control in PowerApps helps with this. It lets you show a list of menu items, each with a label and an icon.
Each menu item should have:
A label (the name of the menu option)
An icon (to help users know what it is)
A screen to go to when picked
Set the Items property of your gallery or ExpandMenu control to your menu list. This list should have the label, icon, and where to go for each menu item. You can use the OnSelect property of the button inside each gallery item to move to another screen.
Note: Adding icons and text to your menu helps users find what they need.
Expand/Collapse Functionality
The expand and collapse feature makes your menu easy to use. You control this with a true or false variable, like varMenuExpanded. Make a custom property called MenuExpanded and connect it to this variable.
Here is how you set up the expand and collapse action:
Add a button (like a hamburger icon) to your menu container.
Set the OnSelect property of the button to:
Set(varMenuExpanded, !varMenuExpanded)
This code switches the menu between open and closed.
Change the width of your menu with the MenuExpanded property:
If(MenuExpanded, 180, 70)
This sets the menu width to 180 when open and 70 when closed.
Use the MenuExpanded property to show or hide menu labels. When closed, show only icons. When open, show both icons and text.
You can also use context variables like locNavigationVisible to show or hide the menu. For example, set the Visible property of the hamburger icon to !locNavigationVisible. This hides the icon when the menu is open.
Tip: Give each screen a special CurrentMenuID. This helps your menu show which item is picked.
Responsive Design
Responsive design makes sure your menu works on all devices. Use responsive containers and layouts that can change. Set the width and height of your menu and its items based on if it is open or closed. This helps your menu fit different screens.
Use flexible height and width settings in your containers.
Make sure your icons and text can change size easily.
Test your menu on both desktop and mobile devices.
You can also show some menu items only to certain users. For example, show an Admin button only to people in a special group. Use a custom property like AdminUser and set the Visible property of the button to AdminUser.
Tip: Try adding animation when your menu opens or closes. This makes your app feel smooth and modern. You can also use animation when you add icons and text to your menu.
Building a collapsible menu in PowerApps gives you a menu that looks good and works well. You can help users move around, save space, and make the app better. Try making a collapsible menu in your next app and see how much easier it is to use. If you want to do more, try adding animation for an even better experience.
Power Apps Navigation Menu Customization
Light/Dark Mode Toggle
You can make your navigation menu special by adding a light and dark mode switch. This lets users pick the style they like most. First, make a custom property in your menu called AppColorMode. Set it to "light" at the start. Add a toggle button to your menu. When someone clicks the button, change AppColorMode from "light" to "dark" or back.
To keep your menu looking nice, connect your icon, text, and background colors to AppColorMode. For example, use a formula like this for your background:
If(AppColorMode = "dark", Color.Black, Color.White)
This way, your menu matches what the user wants. The toggle button can also look different if the menu is open or closed. This makes your menu feel new and easy to use.
Tip: Always check your toggle on different screens to be sure it works everywhere.
Custom Properties
Custom properties help you control your navigation menu. You can use them to send colors, icons, and user roles into your menu. For example, make properties for menu content, hover fill, pressed fill, and selected icon background. These let you change your menu’s look without changing the main part.
You can also use collections to set up your menu items. Put titles, icons, and screens in a collection. Then, use a gallery to show these items. Connect the gallery to your collection so your menu updates when you change the collection.
Note: Custom properties make your menu easy to use again and simple to update.
Appearance and States
You can make your menu better by changing how it looks when people use it. Pick different colors for hover, selected, and pressed states. For example, use a table like this to plan your colors:
Set these colors in your gallery or menu controls. Use variables to know which menu item is picked. Change the background and text color based on the state. This helps users see where they are in the menu.
Good color contrast makes your menu easier for everyone to use.
Testing and Best Practices
Testing the Menu
You want your collapsible menu to work on all devices. First, turn off the 'Scale to fit' setting in Power Apps. This helps your menu keep its shape on every screen. Use containers and set positions with relative values. This way, your menu changes when users resize or turn their device.
Here are steps to test your navigation menu:
Build your menu using container controls and set positions with relative values.
Try Power Apps preview mode to see your menu on desktops, tablets, and phones.
Use browser developer tools to check your menu on different screen sizes and directions.
Organize screens and group related items with containers. This keeps your design tidy and helps your menu adjust to changes.
Tip: Test your menu after every change. This helps you find problems early and keeps your app simple to use.
Usability Tips
You can make your menu easy for everyone by following some best tips. Keep your layout simple and show the most important items first. Use big buttons so people can tap them easily, especially on phones. Put related items together so users find things fast.
To help users, make sure your menu works on all screen sizes. Use collapsible sections to keep your menu short and neat. Add clear labels and icons so users know where each menu item goes.
Accessibility matters. Make sure users can move through your menu with a keyboard. Set a tab order that makes sense and use clear focus signs, like color changes or highlights. Give each button a helpful name or title so screen readers can read them. This helps everyone, even people with disabilities, use your app with confidence.
Note: Good navigation and clear design make your app easier to use and take care of.
A modern collapsible menu can help your app look special. It lets users move around your task management app easily. You also save space and give users more choices. Try making your own menu and change it how you want. If you want to do more, use the Power Apps customization window. You can also check out Microsoft Learn paths and workshops. These resources show you how to use harder formulas and custom updates in your app.
FAQ
How do you add new items to the collapsible menu?
You can add new items by updating the collection or table that holds your menu data. Each item should have a label, icon, and screen name. Refresh the gallery to see your changes.
Can you use the collapsible menu on both desktop and mobile?
Yes, you can. Responsive containers help your menu adjust to different screen sizes. Always test your menu on both device types to make sure it looks and works right.
How do you change the menu’s color scheme?
Set up a custom property for color mode, such as AppColorMode. Use formulas to switch colors based on this property. For example:
If(AppColorMode = "dark", Color.Black, Color.White)
This lets you switch between light and dark modes easily.
What is the best way to highlight the selected menu item?
Use a variable to track the current menu selection. Change the background and text color of the selected item. This helps users see where they are in the app.
Can you reuse the collapsible menu in other PowerApps projects?
Yes! Turn your menu into a component. Add custom properties for menu content and appearance. You can then import and use this component in any PowerApps project.