Power Apps Navigation Menu Component

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-navigation-menu-component/. Author: Matthew Devaney.

Power Apps Navigation Menu Component Posted by - Matthew Devaney on - March 14, 2021 148 Comments

“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. Download Free 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} ) Code language: CSS ( css )

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 Code language: CSS ( css )

Use this code in the OnSelect property to Navigate the user to the selected screen… Navigate ( ThisItem .Screen ) Code language: CSS ( css )

…and then fill-in these remaining properties. Height : Parent.Height Width : 80 ShowScrollbar : false TemplatePadding : 0 TemplateSize : Parent.Height/8.5 Code language: HTTP ( http ) 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 Code language: HTTP ( http ) 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 Code language: HTTP ( http )

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" Code language: JSON / JSON with Comments ( json )

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 Code language: HTTP ( http ) 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 Code language: HTTP ( http )

Write this code in the OnSelect property of the label to navigate to another screen when clicked. Navigate ( ThisItem .Screen ) Code language: CSS ( css )

Finally, shrink the gallery size to the following proportions. Height : 700 Width : 80 Code language: HTTP ( http )

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' } ) ) Code language: CSS ( css )

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" Code language: JSON / JSON with Comments ( json )

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" Code language: JSON / JSON with Comments ( json )

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 Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. Canvas Components Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps