Header & Menu Component 02-24-2024 08:17 AM

[IvanMislav]

A Header & Menu control is a simple navigation component that can be reused on many screens in PowerApps applications.  Menu items can be additionally configured to navigate to other screens or to trigger any other action.

Properties

PROPERTY	DESCRIPTION
Color	Sets the text and icon color.
Background Color	Sets the menu background-color
List Items	Table (list of menu items)
Title	Defines the title text
Back Button	Sets the visibility of the back button
Header Height	Sets the header height
Item Height	Sets the menu item height

Additional configuration (Example)

OnStart, create a collection you will use to reference the screens.

Add the action to OnSelect property of the gallery button to navigate the screens:

Navigate(LookUp(colScreens,ThisItem.Value = displayName,screen))

*v2 Version Edit 

- Added Header Height custom property

- Added Item Height custom property

- Bug Fix - Entire component is now resizing depending on the state (Expanded/Collapsed) to fix the overlay issue. 

NOTE: Header component should always be on the front of the layout of the screen.

[arlgroup]

I tried menu and add label. When menu is expanding label is visible (see attached image). Old label and icon are not.

Please help.

Thanks

[SimonSays]

Quick tip if you don't want to have to create a custom property for every screen. Instead create one custom property of type Table called Screens and set the default value to

Table({Name: "Home", Screen: App.ActiveScreen})

In your App.OnStart build a collection of your screens like this:

Set(Screens, Table(

{Name:"Home", Screen: HomeScreen},

{Name:"Search", Screen: SearchScreen}

));

And then your OnSelect action in the component is:

Navigate(LookUp(AppMenu.Screens, Name="Home", Screen))