PowerApps Tutorial: How to Create a Collapsible Side-Navigation Menu

This tutorial will guide you through the steps to create a collapsible side-navigation menu in PowerApps. Side-navigation menus are a great way to organize app content, making it easier for users to access different sections without cluttering the screen.

By the end of this guide, you’ll learn how to create a collapsible menu that can enhance the user experience by saving space and improving navigation.

Features of the Menu

This menu will be used in the app and will have these two features:

1. Expand and collapse the menu

2. Change between screens

How to create it step by step.

We will create the menu without the expand/collapse feature, and after creating a simple menu, we will make the one with this feature too.

First of all, the menu is a component, so the first step is to create a new component and name it. The name of my component is SideNav (and SideNav_Collapsable for the one that collapses).

Here you can see how the component is going to look like in the end:

Adding Properties

In order for the component to work we have to add some custom properties:

1. The MenuContent is needed because inside it we will store the data about the buttons that will change the screens, for example, the name, the icon, etc.:

2. Inside the MenuContent we will create a table and add all the necessary information. This can be different from app to app because different apps need different menus

3. The hover fill will allow us to make the buttons slightly change color when hovered. :

4. Just like the hover fill the pressed fill will do a similar thing when the button is pressed:

5. When we are in our app we need to know what screen we are on. In order to achieve that we will make the selected icon from the menu have a slightly darker color. That’s why the CurrentMenuID is needed:

      6. Apart from the CurrentMenuID we will also need SelectedIconBG:

7. And finally a BaseIconColor:

8. After creating all these custom properties we need to write the formulas of them according to what we want to achieve.

Building the Component

Now that we have created the custom properties it’s time to start building the component.

1. Create a gallery:

‍

2. Set the gallery’s item property as: SideNav.MenuContent
3. Inside the gallery put two containers

‍

4. Inside the second container add:some text
   • A button and set its OnSelect property: Navigate(ThisItem.PageNavigation)
   • An image

‍

‍

After these steps, the menu should be almost ready, some more things should be added after the menu enters the app.

Adding the expand/collapse feature

Now let's see how we can add the expand/collapse feature

1. Create a new custom property

2. Set the MenuExpanded as: varMenuExpanded

3. Create a new container

4. Inside the container add the button that will expand/collapse the menu

5. Set the buttons OnSelect property as: Set(varMenuExpanded,

!varMenuExpanded)

6. Add an image

7. Set its property as:

8. Finally set the menus width property as:

If(SideNav_Collapsable.MenuExpanded,180,70)

Now to make it fully functional we need to add a few more touches to the app we want to create

Adding the final touches

1. Add this to the app’s formula property:

2. After adding the menu to each screen go to every one of them and give a unique currentMenuID

‍

Conclusion

Creating a collapsible side-navigation menu in PowerApps can greatly improve the usability of your app. It provides a clean and organized layout and gives users quick access to key features.Having this functionality in place will not only make your app look professional but also give you a smooth experience.

Don't stop here! Keep learning with these related tutorials:

1. How to Use The Most Common Functions
2. How to Create a Pop Up
3. How to Use Components