Power Apps Navigation Menu Component (2 level menu)

Introduction

In this tutorial, we will walk through the process of creating a two-level navigation menu component in Power Apps. This component can enhance user experience by providing a structured way to navigate through your app. By using a component library, you can easily reuse and update this menu across multiple screens or apps.

Step 1: Create a Component Library

• Open Power Apps and navigate to the Components section.
• Select "Create a Component Library" to start building your navigation menu component.
• Name your library for easy identification.

Step 2: Create a Navigation Menu Component

• Inside your component library, create a new component and name it "Navigation Menu."
• Define the dimensions of the component to fit your app's design.

Step 3: Create Input Property for Menu Items

• Add an input property to your component for menu items.
• This property allows you to dynamically configure the items displayed in the menu.
• Use a collection or an array to define your menu items.

Step 4: Configure UI for the Menu Component

• Design the user interface by adding labels and buttons for each menu item.
• Use layout controls to organize the items in a clear and visually appealing manner.
• Ensure that the menu is responsive to different screen sizes.

Step 5: Show or Hide Navigation Menu on Hamburger Icon Click

• Add a Hamburger icon to your component for toggling the menu visibility.
• Implement the following logic in the icon's OnSelect property:

  UpdateContext({ShowMenu: !ShowMenu})
  

• Use the ShowMenu context variable to control the visibility of your navigation menu.

Step 6: Create Input Properties for Menu Colors

• Add additional input properties to customize the colors of the menu items.
• This allows users to configure the visual style of the menu based on their app's theme.

Step 7: Test Menu Component Within the Component Library

• Use the preview feature in the component library to test the functionality of your navigation menu.
• Make adjustments as necessary to ensure it works as intended.

Step 8: Set Menu Component Width Dynamically

• To make your menu responsive, set its width using the formula:

  If(App.Width < 600, 200, 300)
  

• This adjusts the width based on the screen size.

Step 9: Add Two-Level Navigation

• Implement the logic for multi-level navigation.
• Structure your menu items to have sub-items that can be displayed when a parent menu item is selected.
• Use nested collections to create parent-child relationships among the menu items.

Step 10: Test Multi-Level Navigation Menu

• Again, use the preview feature to test the multi-level navigation functionality.
• Ensure that all parent and child items are displayed correctly and that the navigation works seamlessly.

Step 11: Save and Publish Component Library

• Once everything is tested and working, save your component library.
• Publish the library to make it available for use in your apps.

Step 12: Add and Configure Left Navigation Menu to App with Tablet Form Factor

• Open your app in Power Apps and navigate to the screens where you want to add the navigation menu.
• Insert your newly created navigation menu component and configure it with the desired menu items.

Step 13: Add and Configure Left Navigation Menu to App with Phone Form Factor

• Similarly, add the navigation menu to your app's phone layout.
• Test the responsiveness and functionality to ensure a smooth user experience.

Conclusion

You have now successfully created a two-level navigation menu component in Power Apps. This component can be reused across different apps, enhancing navigation efficiency. As a next step, consider exploring additional customization options or integrating further components to enrich your app's functionality. For more tutorials and updates, be sure to follow Reza Dorrani's channel.