How to create a hierarchical Navigation menu in Power Apps canvas apps

Hello everyone and welcome to my blog. In today’s blog, I am going to show how you can create a hierarchical navigation menu in Power Apps canvas apps.

To create the hierarchical menu, I will use the Power Platform Creator kit’s Fluent UI Nav component. If you are not aware of Creator kit and unsure of how to use it, please refer to my first blog in the series to get started.

After you install the creator kit, you need to use the Nav component. To do this, import the Fluent Nav component in your APP.

The next step is to add the control to the screen.

Once inserted, you should see the preview of the control as below.

The first step is to set the Items property of the control. I have set the Items property to the below formula.

Table(
     {
        ItemDisplayName: "Actions",
        ItemKey: "file",
        ItemEnabled: true,
        ItemExpanded: false
    },
    {
        ItemDisplayName: "Share",
        ItemKey: "share",
        ItemEnabled: true,
        ItemExpanded: false
    },
    {
        ItemDisplayName: "Share with user",
        ItemKey: "user",
        ItemEnabled: true,
        ItemExpanded: false,
        ItemParentKey: "share"
    },
    {
        ItemDisplayName: "Share with team",
        ItemKey: "team",
        ItemEnabled: true,
        ItemExpanded: false,
        ItemParentKey: "share"
    },
    {
        ItemDisplayName: "Save & Close",
        ItemKey: "saveclose",
        ItemEnabled: true,
        ItemExpanded: false,
        ItemParentKey: "file"
    },
    {
        ItemDisplayName: "Save & New",
        ItemKey: "savenew",
        ItemEnabled: true,
        ItemExpanded: false,
        ItemParentKey: "file"
    }
    
)

The Items array is pretty simple to understand. To understand more about the properties of the Items array, you can refer to Microsoft documentation here.

Below is the behavior of the Nav component.

Great. Isn’t it? Let’s explore few other important properties here. The first is the OnSelect property of the nav component. You can write any formula here when an item is selected in menu.

In the below illustration I have set a variable with the selected item key.

There is the OnChange property that fires every time the selected menu item is changed.

Well that’s it. You now have a fully functional hierarchical navigation menu control for use.

I hope this helped. If you have liked the post and if this post has helped you, please subscribe to my blog.

Debajit Dutta

Related