PowerApps Horizontal Navigation Menu Component With Submenu

Introduction

In this article, we will learn the step-by-step implementation for developing horizontal menus with submenu options in canvas PowerApps. We will make use of a collection and a PowerApps component to easily reuse the navigation menu across multiple screens. This will also highlight the currently active screen in the navigation bar.

Implementation

Let's see the step-by-step implementation for the horizontal navbar in PowerApps.

Step 1. Create screens

In this case, I have created 10 screens as shown below.

Step 2. Define the collection

We will define a collection that will store the menu, submenu, screen names, and ParentTab.

• For the items, which has ParentTab value as blank indicates that those are the parent menu items.
• For defining the child items i.e. submenu, set the ParentTab value to the Title value of the Parent item as shown below.
• Each set of menu-submenu should have same Id value.

Set the OnStart property of the App to:

ClearCollect(colHorizontalMenu,

{Title:"Property",Screen:Blank(), Id:1, ParentTab: ""},
{Title:"Property 1",Screen:Screen1_1, Id:1, ParentTab: "Property"},
{Title:"Property 2",Screen:Screen1_2, Id:1, ParentTab: "Property"},
{Title:"Property 3",Screen:Screen1_3, Id:1, ParentTab: "Property"},

{Title:"Owner",Screen:Blank(), Id:2, ParentTab: ""},
{Title:"Owner 1",Screen:Screen2_1, Id:2, ParentTab: "Owner"},
{Title:"Owner 2",Screen:Screen2_2, Id:2, ParentTab: "Owner"},

{Title:"Sales",Screen:Blank(), Id:3, ParentTab: ""},
{Title:"Sales 1",Screen:Screen3_1, Id:3, ParentTab: "Sales"},
{Title:"Sales 2",Screen:Screen3_2, Id:3, ParentTab: "Sales"},

{Title:"Contractor",Screen:Blank(), Id:4, ParentTab: ""},
{Title:"Contractor 1",Screen:Screen4_1, Id:4, ParentTab: "Contractor"},
{Title:"Contractor 2",Screen:Screen4_2, Id:4, ParentTab: "Contractor"},

{Title:"Settlement",Screen:Screen5, Id:5, ParentTab: ""}

);

Step 3. Define the color theme

Add the color theme on the OnStart property of the App:

Set(varMenuPrimaryColor, RGBA(4, 42, 61, 1));
Set(varMenuSecondaryColor, RGBA(4, 166, 235, 1));

Step 4. Define the variable for the active tab

We will use a variable named varTabSelected for storing the Id of the active menu. Define this variable to OnStart property of the App:

Set(varTabSelected, 1);

Step 5. Add a component

Step 5.1. Add a new component (say HorizontalMenuComponent) with the below properties:

• Width = App.Width
• Height = 70
  • We will update the height to dynamic in the next steps, but for now, keep it 70
• Fill = Transparent
• Access spp scope = ON
  • This property allows you to access variables defined in the OnStart property of the app. You can find this property in the right side of the component properties.

Step 5.2. Add a rectangle control to show the fixed background. Set the properties as below:

• DisplayMode = DisplayMode.Disabled
  • So that it will not have a hover effect.
• DisabledFill = varMenuPrimaryColor
• X = 0, Y =0
• Width = App.Width
• Height = 70
  • This should be the same as the component height.

Step 5.3. Add a blank horizontal gallery (say Gallery1) which we will use for showing the parent menu items. Use the below properties for a better look and feel:

• Items = GroupBy(Filter(colHorizontalMenu, Id = varTabSelected || ParentTab = "") ,"Id","GroupMenu")
  • We have filtered the collection to only show the parent menu items along with the submenu items of the active tab.
• TemplateSize = 200
  • This will be the width of each main menu item.
• Show Scrollbar = Off
• X = 0, Y = 0 (You can change the X position if you want the center-aligned menu)
• Width = CountRows(Self.AllItems)*Self.TemplateWidth
  • This will cover all the parent items horizontally and removes the horizontal scrolling.
• Height = App.Height
  • So that it can show all the submenu items vertically.
• TemplatePadding = 0