I developed a Power Apps application for leave management a few weeks ago. Since I had to switch between the screens there constantly, I made a left navigation component so that users could do it quickly.
In this tutorial, I will explain how to create a Power Apps left navigation component step by step.
Create Power Apps Left Navigation Component
If we want to use the same controls in Power Apps on every screen, we can use a component rather than repeatedly using the same controls. Once a left menu component is created in Power Apps, it can be used repeatedly across several screens.
In the example below, you can see that my Power Apps application has a left navigation component for each screen. Thus, I can easily navigate between the screens.
To achieve this, follow the steps below!
1. Open the Power Apps application -> On Tree view -> Select Components -> Then, click on +New component. It will create a component and rename the component like “LeftNavigationMenu.”
2. Set the Height property of the LeftNavigationMenu component with the below formula.
Max(App.Height, App.DesignHeight)This formula takes the screen’s full height.
3. Add a Hamburger menu icon to the Power Apps component. Then, adjust the icon’s height, width, and padding properties with the values below.
Height: 70
Width: 70
Left padding: 15
Right padding: 15
Top padding: 15
Bottom: 15
4. Provide the below formula in the OnSelect property of the Hamburger menu icon.
Set(varMenu,!varMenu)We’re using this formula for opening and closing the left navigation component based on the click on this icon. This formula always sets true and false values for the varMenu variable.
5. Open the Properties of the LeftNavigationmenu component ->Under Custom properties -> Click on +New custom property -> After providing the below details ->Click on Create.
- Name: Provide the name of the custom property.
- Description: Description of the custom property.
- Property type: Output
- Data type: Number
6. Save the changes and provide the formula below in the custom property [ MenuWidth] of the LeftNavigationMenu component.
If(varMenu,Max(App.Width, App.DesignWidth)/10,75)If this width is not enough for your component you can adjust the values like below.
If(varMenu,Max(App.Width, App.DesignWidth)/10+60,75)
7. Then, provide the formula below in the Width property of the LeftNavigationMenu component.
LeftNavigationMenu.MenuWidth
8. To test the component in Power Apps screens, provide some color to its Fill property. Then, open Screens -> Click on the +Insert tab to import the component into the screen -> Under Custom -> Select LeftNavigationMenu.
9. Now, preview the app once. You can see the component width will change dynamically based on the hamburger icon click.
Now, we’ll see how to add the remaining icons for navigating between the screens.
10. Add a Power Apps Blank Vertical Gallery control to the component. Then, add the following formulas to its height and width properties.
Height: Parent.Height-Ico_HamMenu.Height
Width: Parent.Width
11. Add a Rectangle to the gallery within the Power Apps component. Then, set its Height, Width, and Y properties with the values below. Also, set the Gallery Control’s Template size property with the value below.
/