Power Apps Navigation Menu Component

Power Apps Navigation Menu Component



“Don’t repeat yourself” is a coding principle smart developers use to avoid doing the same work twice. Canvas app components are a great example of this. You can make a component and re-use it on several screens as well as in other apps entirely.

In this article I will show you how to make a Power Apps navigation menu component.

Introduction: The Company Portal App 
Creating A Component & Properties
Adding Icons And Text
Current Screen Indicator
HoverFill And SelectedFill
Test The Component In An App




Introduction: The Company Portal App

The company portal app is used by employees at a technology firm to lookup information that is relevant to them in several areas: news, travel, budgets, etc. Employees go to different screens by selecting an option from the navigation menu.




Creating The Component & Properties

Open Power Apps Studio and create a new canvas app from blank. Then go to the Components menu and make a new component called cmp_SideNav.



Set the Fill property of the component to a dark blue color using the RGBA value below.

RGBA(51, 52 ,74, 1)


Then make a new custom input property called Items with the data type Table.



The Table property will hold information about what icon & text to display in the menu and which screen to navigate to. Use this code in the Table property so we have some fake values to design the menu with.

Table(
    {Value: "Item 1", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
    {Value: "Item 2", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
    {Value: "Item 3", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
    {Value: "Item 4", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
    {Value: "Item 5", Icon: Icon.Waypoint, Screen: App.ActiveScreen},
    {Value: "Item 6", Icon: Icon.Waypoint, Screen: App.ActiveScreen}
 )



Next, create 4 additional custom input properties to store the menu colors…

  • Color
  • CurrentIndicator Color
  • HoverFill
  • SelectedFill



… and input these values into the component properties.

NameValue
ColorWhite
CurrentIndicatorColorColorFade(RGBA(29,161,242,1),70%)
HoverFillRGBA(255,255,255,10%)
SelectedFillRGBA(255,255,255,10%)




Adding Icons And Text

The side navigation menu will use a gallery to show icons and text describing the menu option. Place a blank vertical gallery onto the component.



Populate the Items property of the gallery using this code.

cmp_SideNav.Items


Use this code in the OnSelect property to Navigate the user to the selected screen…

Navigate(ThisItem.Screen)


…and then fill-in these remaining properties.

Height: Parent.Height
Width: 80
ShowScrollbar: false
TemplateHeight: Parent.Height/8.5
TemplatePadding: 0



Now insert a new icon into the gallery…


…and with the following properties and values.

Color: cmp_SideNav.Color
Icon: ThisItem.Icon
Height: 35
Width: 35
X: (Parent.TemplateWidth-Self.Width)/2
Y: 15



Then add a new label beneath the icon…



…and give it these properties.

Text: ThisItem.Value
Align: Center
Size: 10
Width: Parent.TemplateWidth
X: 0
Y: 50



Our component is starting to look like a menu!




Current Screen Indicator

When a menu item is selected a thin vertical rectangle will appear beside it to indicate the current screen.

Add a new custom property called Default with the type Text. This property will store the name of the current screen.



Put the name of the 1st menu option in the Default property so there is a value to build the component with.

"Item 1"



Insert a label into the gallery with no text…



…and use these properties to define its size, visibility and style.

Fill: cmp_SideNav.CurrentIndicatorColor
Height:  Parent.TemplateHeight
Visible: ThisItem.Value=cmp_SideNav.Default
Width: 5




HoverFill And SelectedFill

Hovering the mouse over top of a menu item should make it become highlighted. Selecting a menu item should highlight the option too.

Insert a label without any text into the gallery…



…and fill-in these properties to get the desired effects.

Height: Parent.TemplateHeight
Width: Parent.TemplateWidth
Fill:  If(ThisItem.Value=cmp_SideNav.Default, cmp_SideNav.SelectedFill, Transparent)
HoverFill: cmp_SideNav.HoverFill
PressedFill: cmp_SideNav.SelectedFill



Finally, shrink the gallery size to the following proportions

Height: 700
Width: 80



Now we are ready to try out the menu in an app!





Test The Component In An App

The navigation component brings the user to a new screen when clicked. Make these new screens in order to test the component.

  • News Screen
  • Science Screen
  • Travel Screen
  • Budget Screen
  • Maps Screen
  • Settings Screen


The menu options will be stored as a table inside of a variable as opposed to a collection because they are not meant to be changed while the app is running. Put this code in the OnStart property of the app. Then run App OnStart.

Set(colSidebarMenu,
  Table(
    {Value: "News", Icon: Icon.Newspaper, Screen: 'News Screen'},
    {Value: "Science", Icon: Icon.CameraAperture, Screen: 'Science Screen'},
    {Value: "Travel", Icon: Icon.Airplane, Screen: 'Travel Screen'},
    {Value: "Budget", Icon: Icon.Money, Screen: 'Budget Screen'},
    {Value: "Maps", Icon: Icon.Waypoint, Screen: 'Maps Screen'},
    {Value: "Settings", Icon: Icon.Settings, Screen: 'Settings Screen'}
  )
)



Insert the component onto the “News Screen” and use colSidebarMenu in the Items property.



Set the Default value to News so it matches the text on the menu option.

"News"




Then go to the science screen, insert the component with colSidebarMenu in the Items property…



…and set the Default value to News so it matches the text on the menu option. Repeat this process for all of the screens in the menu.

"Science"




Now we have a working navigation menu component.





Questions?

If you have any questions or feedback about Power Apps Navigation Menu Component please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest
26 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Patrick
Patrick
10 months ago

Nice job Matthew!
I tried following your instructions but as a newbie your instructions at the step where you insert the component into the screens isnt clear enough.So i couldn’t get it working..
I got confused with the fake data you initially added and then the real data for the menu.I set the variable of the Table in the OnStart of the apps but the final icons and data doesnt appear when i insert the component

Can you please clarify this step?

Necdet Saritas
Necdet Saritas
10 months ago

Hi Matthew,
I did exactly as you explain but the sidebar menu is not visible and there isn’t any error on the app. Where I made mistake?

Necdet Saritas
Necdet Saritas
10 months ago

Sidebar Nav doesn’t display the icon. But all the other functions on the sidebar Nav working. When I play the apps from editing it display all screen but when I directly from the app play I got a white screen. Nothing to see.

Nelly
Nelly
10 months ago

Amazing as always!
Thank you!

Nelly
Nelly
10 months ago
Reply to  Nelly

Also there seems to be a few glitches when I tried to create it…but it would work with a after a few tweaks.

Emilio Roqueta
Emilio Roqueta
10 months ago

Hi Matthew,

On the section HoverFill And SelectedFill, I did not found where to put this on the label:

SelectedFill: cmp_SideNav.SelectedFill

But the component works fine anyway without to highlight the item option.

BrianW
BrianW
10 months ago

Nice article
in the Icon/text section should Icon: cmp_SideNav.Color not be
Color: cmp_SideNav.Color

Maggie
Maggie
10 months ago

How can i replace one of the menuitems to launch an external URL link. screen:App.ActiveScreen only works for Screens

Marcus Castro
Marcus Castro
10 months ago

Hi Matthew, thanks for the article, it helped a lot! Hey, I’ve found 2 issues on the article that I had to fix to make it work:

1) Icon: cmp_SideNav.Color > Should be cmp_SideNav.Icon
2) Fill: CurrentIndicatorColor > Should be cmp_SideNav.CurrentIndicatorColor

Craig
Craig
9 months ago

Matthew thank you for this. I can easily utilize this for Intake form navigation. What I’m not sure of is where I ran aground. All is working as it should but the icons didn’t change after I ran the app on start. They are all still showing as waypoint. All other areas hover, changing of screens, etc. are working just fine.

Thank you.

Craig
Craig
9 months ago

Matthew,

I found it. In the step you have to add the icon when you pick an icon for that Icon in the Icon = “name of the icon” example your example has Waypoint thus Icon=Waypoint. However seems one needs to update once add the Icon the Icon=ThisItem.Icon. Then in the screens section they show up properly based on the table on App OnStart.

April Suk
April Suk
9 months ago

Hi Matthew,
I have a very similar navigation component that I have built. I am also trying to set the visibility of the navigational items (for an admin item) as well as re-use a form. My main issue is I cannot seem to find a way to add an item to the table that will add a Newform(Formname) to the end of one of the nav items. I have tried adding FormMode and FormName so it can be truly dynamic and setting them as
ThisItem.FormMode(ThisItem.FormName) as well as setting FormName as char(40) & FormName & char(41) & char (53) but neither way works.

I was reading your other tutorial on using behaviors and wondering if the answer is somewhere in between.

Any insight you can give to send me down the right track so I can trigger NewForm from the navigation component would be greatly appreciated.

Kelly Webb
Kelly Webb
9 months ago

Works perfect! Thank you!!

Paul
Paul
9 months ago

Thank you for these instructions! You explained it very well and simply. 

Melissa
Melissa
9 months ago

Hi Matt,

Great article. I was able to create the component however it does not navigate to the other screens when I select the icons. Also when I try to change the items value for the component to the global variable it says no data was found :/

Marcel
Marcel
8 months ago

Hey, I did everything what you’ve mentioned but when I insert the component in my app nothing is displayed. Could you help me?

Reginald
Reginald
8 months ago

Thank you, Matthew. I followed the instructions but unfortunately, it didn’t work for me. I only wanted the background colour on hover and selected without the indicator. I am however getting an error on Fill: If(ThisItem.Value=cmp_SideNav.Default cmp_SideNav.SelectedFill, Transparent)

I also wanted to use this but without the menu item loading a new page on click similar to how tabs work with the values coming from Excel table. I attached the design. Do you know if this is possible at all? Thanks in advance.

Capture.JPG
Dale Menken
Dale Menken
1 month ago
Reply to  Reginald

Followed your instructions and everything looks correct, but when the component is added to the screen, the OnSelect property is dropped from the gallery and the menu doesn’t work. The Hover action is working but the screen, overlay, default and Current items don’t change. Not sure what I did wrong here.

Last edited 1 month ago by Dale Menken