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.

Table Of Contents:
• 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 Items property will hold information about what icon & text to display in the menu and which screen to navigate to. Use this code in the Items 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.

Name	Value
Color	White
CurrentIndicatorColor	ColorFade(RGBA(29,161,242,1),70%)
HoverFill	RGBA(255,255,255,10%)
SelectedFill	RGBA(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
TemplatePadding: 0
TemplateSize: Parent.Height/8.5

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 hovered and selected 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

Write this code in the OnSelect property of the label to navigate to another screen when clicked.

Navigate(ThisItem.Screen)

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.

Want To Learn More About Power Apps Canvas Components?

This tutorial is part of a free online course called Learn Power Apps Canvas Components By Making 5 Components. The best way to learn isn’t by watching videos, or by reading articles. The best way to master Power Apps canvas components is by building real-world projects. So that’s exactly what we’ll do. Go ahead and get started on the other lessons below. I know you’re going to get alot of this free course.

Table Of Contents: Introduction: Learn Power Apps Components By Making 5 Components 1. Make Your First Power Apps Component (Temperature Conversion) 2. Make A Power Apps Navigation Menu Component 3. Make A Power Apps Pop-Up Menu Component 4. Make A Custom Function With Power Apps Canvas Components 5. Make A Power Apps Component Library

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.