Power Apps Horizontal Navigation Menu Component With Submenu

A few days ago, I started working on an IT Help Desk application in Power Apps. The app has many screens, so I decided to use a Power Apps navigation component instead of adding separate navigation buttons on the home screen. Based on my research, a horizontal navigation menu with submenus is a better option than a left-side menu.

In this article, I will explain how to create a Power Apps horizontal navigation menu component with submenu.

Create a Horizontal Navigation Menu Component With Submenus in Power Apps

The example below shows that the Power Apps application has a top horizontal navigation menu with submenus. Which also includes the company logo, company name, and current user name. If I click on any screen names in the navigation bar, it takes me to that screen.

Let’s see the step-by-step implementation for the horizontal navbar in Power Apps.

1. For this application, I took eight screens; you can take as many as you want according to your requirements.

2. Provide the code below on the App object’s Formulas property.

NavMenuItems= 
Table(
{Id:1,Name:"Home",Screen:SC_Home},
{Id:2,Name:"Tickets",Submenu:Table({Id:2.1,Name:"Create New Ticket",Screen:SC_CreateNewTicket},{Id:2.2,Name:"View All Tickets",Screen:'SC_View All Tickets'})},
{Id:3,Name:"Settings",Submenu:Table({Id:3.1,Name:"Profile Settings",Screen:SC_ProfileSettings},{Id:3.2,Name:"Change Password",Screen:'SC_Change Password'})},
{Id:4,Name:"Support",Submenu:Table({Id:4.1,Name:"Contact IT Support",Screen:SC_ContactITSupport},{Id:2.2,Name:"Provide Feedback",Screen:SC_ProvideFeedback})},
{Id:5,Name:"Dashboard",Screen:SC_Dashboard}
);

NavMenuTheme = {
    Menu: ColorValue("#00695C"),              // Deep Teal for top menu
    MenuPressed: ColorValue("#00897B"),       // Medium Teal when pressed
    Submenu: ColorValue("#4DB6AC"),           // Lighter Aqua for submenu
    SubmenuPressed: ColorValue("#80CBC4")     // Softer highlight for submenu pressed
};

Here,

• NavMenuItems = A variable that contains a table of menus and submenus.
• NavMenuTheme = A variable that contains a record with color settings.

3. Then, open the Components section under the Tree view, click on + to add a new component, rename the component, and Enable the Access app scope in properties.

Update the Width property with the code below.

App.Width

4. Add a horizontal container within the component and adjust its properties with the values below.

X = 0
Y = 0
Width = Parent.Width
Height = Parent.Height
Border radius = 0
Drop shadow = None

5. Add a vertical container within the main container, as in the example below, and update its properties with the values mentioned below.

Minimum height = 0
Minimum width = 0
Border radius = 0
Drop shadow = None

6. Add one more Horizontal container within the previous container, and update its properties with the values below.

Justify(horizontal) = Start
Aligh(vertical) = Start
Minimum width = 0
Flexible height = Off
Height = 50
Border radius = 0
Drop shadow = None

7. Within the previous container, add one more horizontal container and the values below for the given properties.

Justify(horizontal) = Start
Aligh(vertical) = Center
Minimum height = 0
Flexible width = On
Minimum width = 0
Border radius = 0
Drop shadow = None

8. Add an image control within the last horizontal container and update its height and width properties with the given values.

Height = 40
Width = 40
Border radius = 20
Align in container = Center

9. Add a text label to display the company name, and update its properties with the values below.

Text = "Your Company Name"
Font = Segoe UI
Font size = 20
Font weight = Normal
Minum height =40
Align in container = Stretch
Flexible width = On
Minimum width = 0

10. With the main container, add a gallery control and provide the below code on its Items property. Also, update the property values below.

Items = NavMenuItems
TemplatePadding =0
TemplateSize = Self.Width/Self.AllItemsCount
Width = Self.AllItemsCount *150

11. Add a Vertical container within the gallery and update the properties with the given values.

Justify(vertical) = Start
Align(horizontal) = Stretch
X= 0
Y= 0
Width = Parent.TemplateWidth
Height = Parent.Height
Border radius = 0
Drop shadow = None

12. Add a normal container within the vertical container, as shown below, and update the properties below.

Minimum width = 0
Flexible height = Off
Height = 50
Border radius =0
Drop shadow = None

13. Add a button control within the previous container and update the following properties.

Fill = Color.Transparent

Height = Parent.Height

HoverFill = RGBA(200, 200, 200, 0.1)

PressedFill = ColorFade(Self.HoverFill,-20%)

Width = Parent.Width 

OnSelect = Switch(true,
IsBlank(ThisItem.Submenu),
Navigate(ThisItem.Screen,ScreenTransition.Fade);
Set(varMenuOpen,false);
,
varMenuSelected.Id =ThisItem.Id,
Set(varMenuSelected,ThisItem);
Set(varMenuOpen,!varMenuOpen);
Set(varMenuHeight,Self.Height + CountRows(ThisItem.Submenu)*40);
,
Set(varMenuOpen,true);
Set(varMenuSelected,ThisItem);
Set(varMenuHeight,Self.Height+CountRows(ThisItem.Submenu)*40);
)

14. Under the Cont_menu2, add a horizontal container and update the properties below.

DropShadow = None
Height = Parent.Height
Width = Parent.Width
Border radius = 0
Justify(horizontal) = Center
Align (vertical) = Stretch
Fill = If(
    App.ActiveScreen = ThisItem.Screen Or !IsBlank(
        LookUp(
            ThisItem.Submenu,
            Screen = App.ActiveScreen
        )
    ),
    NavMenuTheme.MenuPressed,
    NavMenuTheme.Menu
)

15. Now, within the previous container, add a text label and update its properties with the given values.

Text = ThisItem.Name
AlignInContainer = Stretch
Minum height = 0
Flexible width = On
Minimum width = 0

16. Add an icon within the cont_menu3 and update the following properties.

Icon = If(varMenuOpen And ThisItem.Id =varMenuSelected.Id,Icon.ChevronUp, Icon.ChevronDown)

Visible = !IsBlank(ThisItem.Submenu)

AlignInContainer = Stretch

Minimum height = 0
 
Width = 15

Color = RGBA(255, 255, 255, 1)

17. Under Cont_Menu, add a regular control for showing submenus. Also, update the container properties with the below values.

Align in container = Stretch
Flecible height = On
Minimum width = 0
Minimum height = 0
Border radius = 0
Drop shadow = None

18. Add a gallery control within the submenu container and update its properties with the values below.

Items = ThisItem.Submenu
Width = Parent.Width
Height = Parent.Height
TemplateSize = 40
TemplatePadding = 0
ShowScrollbar = false
ShowNavigation = false
X = 0
Y = 0

19. Copy the btn_Menu, paste it within the sub menu gallery, and update the OnSelect property. If you add a new button, update the following properties.

Width = Parent.Width
Height = Parent.TemplateHeight
X = 0
Y = 0
Fill = Color.Transparent
HoverFill = RGBA(200, 200, 200, 0.1)
OnSelect = Set(varMenuOpen,false);Navigate(ThisItem.Screen,ScreenTransition.Fade);
Pressed Fill = ColorFade(Self.HoverFill,-20%)

20. Add a text label within the Gal_submenu and update its properties.

Text = ThisItem.Name

Font = Segoe UI

Font Size = 10

X= 0

Y= 0

Width = Parent.Width

Height = Parent.TemplateHeight

Fill = If(App.ActiveScreen=ThisItem.Screen,NavMenuTheme.SubmenuPressed,NavMenuTheme.Submenu)

Color = RGBA(255, 255, 255, 1)

21. Add a horizontal container under the cont_Menu and update its properties.

Justify (horizontal) = Center
Align (vertical) = Center
Height = 50
Align in container = Start
Flexible width = Off
Width = 70

22. Within the cont_User, add an image control to display the current user’s image. Add the following properties to the image control.

Height = 40
Align in container = Center
Width = 40
Border radius = 0

23. Under the TopNavMenuComponent, add a horizontal container and send it to the back, then update the following properties.

Justify (horizontal) = Start
Align (vertical) = Start
X = 0
Y = 0
Width = Parent.Width
Height = 50
DropShadow =None
Border radius = 0
Fill = NavMenuTheme.Menu

24. Update Gal_submenu, Visible property with the below code.

Visible = varMenuOpen And ThisItem.Id=varMenuSelected.Id

25. To add the navigation component to the app, go to the Screens under the Tree view -> Click + Insert -> Under Custom -> Choose the TopNavMenuComponent.

26. Finally, the top navigation component is added to the screen, which will look like the image below. For the remaining screens, add this component by following the above step.

This way, we can build a horizontal top navigation component with multiple menus in Power Apps.

I hope you found this helpful article! In this article, I clearly explained the steps to build a horizontal navigation component with submenus in Power Apps. Follow this article if your application also has multiple screens and can be categorized.

Also, you may like:

• Export Dataverse Table to Excel Using Power Automate
• Get Choice Column Value From Dataverse Using Power Automate
• Hide Top Navigation Bar in Power Apps
• Power Apps Modern Form Control
• Show Hide Fields Based On Power Apps Dropdown Selection
• Create Collection in Power Apps [With Examples]
• Easiest Way to Add Image to a Power Apps Collection