Whether you call them Hamburger menus, Flyout menus, Filtering menus, or Collapsible menus, they all serve the same purpose. When you want to hide options from the screen until the user needs them, these menus are your go-to solution. Screen space is precious, and being able to hide menus or inputs is incredibly helpful.
With Power Apps Canvas Apps, these types of menus are not "built-in," meaning if you want one, you have to build it yourself. The good news is that, thanks to layout Containers, they're not difficult to create. And by incorporating a Timer control, you can even add a touch of animation for good measure.
For a step-by-step overview, check out this video Power Apps Hamburger Menus, where we take you from nothing to a working flyout menu. It's a straightforward approach to this versatile concept.
At a high level, here's how Collapsible menus work:
• Add a container and place whatever controls or buttons you want to be in the menu inside it.
• Place an icon on the screen to represent your menu. Set the color to change depending on whether the menu is shown or hidden.
• To show and hide the menu, use a context variable. Set the OnSelect property of the Icon to UpdateContext({varShowMenu: Not(varShowMenu)}) – this toggles the variable from True to False with each press of the icon.
• Set the container's Visible property to varShowMenu.
Now, if you want to add some fancy animation:
• Add a Timer control to the screen. Assume the control is named Timer1 for this example.
• Set the Duration to the desired time you want the menu to spend showing (in milliseconds). 500 (half a second) feels about right.
• Set the Reset property to Not(varShowMenu).
• Set the Start property to varShowMenu.
• Now, go back to your container and note its current height (e.g., 200). If that's your current height, change the Height to 200 * Timer1.Value/Timer1.Duration.
Voilà! Now you have a hamburger menu that smoothly shows when users click on the icon and closes when they click again.
With this basic concept in your skillset, you can customize it as you see fit. In the video https://youtu.be/x1rGIJmUG7c, we also demonstrate how to add a visual indicator that the data is currently filtered and ways to remove the filters with a simple click.
Here are some example use cases for these types of menus:
1. Dashboard Navigation: In a Power Apps dashboard application, a hamburger menu can be used to provide quick access to various sections or pages within the app, such as sales data, customer information, or inventory management.
2. Task Management App: In a task management app, the hamburger menu can be used to display different filtering and sorting options, allowing users to quickly organize and view tasks based on priority, due date, or project.
3. Document Management: In a document management app, the hamburger menu can provide access to different document categories, recent files, or favorite documents, making it easy for users to find and access the files they need.
4. Employee Directory: In an employee directory app, the hamburger menu can be used to display search filters and sorting options, enabling users to find employees based on criteria such as department, location, or job title.
5. Event Management: In an event management app, the hamburger menu can be used to access different sections such as event details, guest lists, and task assignments, providing a central hub for managing all aspects of an event.
6. E-commerce App: In an e-commerce app, the hamburger menu can be used to display product categories, shopping cart, and account information, streamlining the shopping experience for users.
7. Learning Management System (LMS): In an LMS app, the hamburger menu can provide access to course catalogs, progress tracking, and user profiles, making it easy for learners to navigate through the available educational resources.
8. Customer Relationship Management (CRM): In a CRM app, the hamburger menu can be used to access various modules such as leads, contacts, and opportunities, allowing users to quickly switch between different aspects of customer management.
9. Expense Tracker: In an expense tracking app, the hamburger menu can provide access to different expense categories, reporting tools, and account settings, making it easy for users to manage their finances.
10. Social Networking App: In a social networking app, the hamburger menu can be used to display user profiles, friend lists, and notification settings, providing a centralized location for users to manage their social interactions.
If you need help implementing this solution or have any questions about the Power Platform, please check out our Services or click Contact Us. We can assist you with everything from fixing one small problem to taking on full-scale projects. We even offer mentoring and Power Platform Training if learning is your top priority. So don't hesitate to reach out and let us help you make the most of your Power Apps experience!