Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find consulting services
    • Blog
    • Customer stories
    • Documentation
    • Roadmap
    • Self-paced learning
    • Webinars
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • Register
    • ·
    • Sign In
    • ·
    • Help
    Go To
    • Power Apps Community
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog & News
    • News & Announcements
    • Power Apps Community Demo Extravaganza 2020
    • Galleries
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • 2019 Microsoft Business Applications Summit Recordings (Archived)
    • Microsoft Business Applications Summit 2020 Session Recordings
    • Ideas
    • Power Apps Ideas
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Header & Menu Component

    Header & Menu Component

    07-26-2019 02:22 AM - last edited 07-31-2019 07:00 AM

    IvanMislav
    Frequent Visitor
    9387 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    IvanMislav
    IvanMislav
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Header & Menu Component

    ‎07-26-2019 02:22 AM

    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

    header-Menu-custom-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.

    Preview file
    117 KB
    HeaderMenu_v2.msapp
    Message 1 of 9
    9,387 Views
    5 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    CABIRD
    CABIRD Helper V
    Helper V
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎07-31-2019 04:32 AM

    Hello @IvanMislav 

     

    Like your header & menu component. However click on hamburger menu and select screen two or three and no switch to screen two or three. 

     

    Added the below to components gallery onselect. 

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

    I aslo added header thumbnail to media.

     

    Any thoughts as to why this isn't functioning as clearly it did for you. 

     

    Regards

    Christopher

    Message 2 of 9
    9,211 Views
    0 Kudos
    Reply
    IvanMislav
    IvanMislav
    Frequent Visitor
    In response to CABIRD
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎07-31-2019 05:55 AM

    Hi Christopher,

     

    Thanks for the feedback. Where did you add the Navigate function? It should be added to btnGalleryItem button which is nested inside the gallery galHeader. The whole function should then look like this:

    Set(glbDropMenu, !glbDropMenu);Navigate(LookUp(colScreens,displayName=ThisItem.Value,screen))

     

    Also, make sure the collection is created. Sometimes you need to close the app and then reopen it again or create a button that will initiate ClearCollect function when clicked.

     

    Additionally, I will upload a new version of this component later today which will include some additional custom properties and a bug fix.

     

    Hope this helps,

     

     

    Regards

    Message 3 of 9
    9,206 Views
    1 Kudo
    Reply
    CABIRD
    CABIRD Helper V
    Helper V
    In response to IvanMislav
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎07-31-2019 06:06 AM

    Hello @IvanMislav 

     

    Thank you for taking the time to respond and so quickly. I really appreciate you doing so. 

     

    The code below came from https://powerusers.microsoft.com/t5/Components-Gallery/Header-amp-Menu-Component/td-p/328654 the bottom of the article. 

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

    Code you provided and clarification as to where to add the code resolved the issue.

     

    I look forward to looking at the updated version to be published later today. 

     

    Have a fabulous day.

     

    Best regards

    Christopher

    Message 4 of 9
    9,204 Views
    0 Kudos
    Reply
    IvanMislav
    IvanMislav
    Frequent Visitor
    In response to CABIRD
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎07-31-2019 07:22 AM

    Hi Christopher,

     

    Yes, that function should work fine as long as you have exactly the same collection as the one from my example.

     

    I uploaded the new version so you can try it now. I should note that I'm having issues when importing that file into another app as some of the properties are not imported correctly. In my case, galHeader Gallery height is set to "80" but it should be "CountA(galHeader.AllItems.btnGalleryItem)*btnGalleryItem.Height". I checked the JSON file and it seems that everything is saved alright. It might be that the issue happens just in my case. We should also bear in mind that components feature is "in preview" atm so these kinds of glitches are to be expected.

     

    Regards

     

    Message 5 of 9
    9,171 Views
    1 Kudo
    Reply
    CABIRD
    CABIRD Helper V
    Helper V
    In response to IvanMislav
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎07-31-2019 07:33 AM

    Hello @IvanMislav 

     

    New version works perfectly. 

     

    The only change was btnGalleryItem button had to be changed from Set(glbDropMenu, !glbDropMenu); to below

    Set(glbDropMenu, !glbDropMenu);Navigate(LookUp(colScreens,displayName=ThisItem.Value,screen))

    Excellent.

     

    Best regards

    Christopher

    Message 6 of 9
    9,168 Views
    0 Kudos
    Reply
    pmcgurn01
    pmcgurn01
    Frequent Visitor
    In response to CABIRD
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎10-26-2019 06:55 PM

    Edit, but leaving original below.

    I was able to get this working by changing the formula for OnSelect on the button to

     

    Navigate(LookUp(colScreens, Display = galHeader.Selected.Value, Screen))

     

    Original post:

    I couldn't quite get this to work.  I get the gallery set up, items populated, OnSelect added, re-ran App OnStart, and when using the player/preview mode, nothign happens when clicking an item.  I actually notice the whole component renders weirdly in edit mode, as well.  Are you working off a different version than the one that's attached ot the original post in this thread?

     

    This is what the component looks like directly after import.

    screenshot1.pngscreenshot2.png

    Message 7 of 9
    8,111 Views
    0 Kudos
    Reply
    IvanMislav
    IvanMislav
    Frequent Visitor
    In response to pmcgurn01
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎10-29-2019 11:16 PM

    Hi @pmcgurn01,

     

    I'm glad you got this to work. As for the layout issues I also had the same problem. Check my earlier post and see if that solves your problem: I uploaded the new version so you can try it now. I should note that I'm having issues when importing that file into another app as some of the properties are not imported correctly. In my case, galHeader Gallery height is set to "80" but it should be "CountA(galHeader.AllItems.btnGalleryItem)*btnGalleryItem.Height". 

    Message 8 of 9
    8,023 Views
    0 Kudos
    Reply
    Jex
    Jex
    New Member
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎11-13-2020 06:39 AM

    Very interrsting topic.
    I would love to have access to the msapp but the link seems disabled, could you re-upload it please so i can have some fun with it ?

     

    Thanks a lot

    Message 9 of 9
    849 Views
    0 Kudos
    Reply

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Studio
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2021 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks