Beautiful navigation for your mobile Canvas Apps!
This menu consists of a mixture of code and out-of-the-box controls.
To install the component, please follow these steps:
- Please download it from this repo,
- Change the MenuItems property to
Table( {
//this is the name of the screen
MenuItem: "Home",
// this is the screen you will navigate to when you select this item
MenuScreenNavigate: Home,
// this is the colour of the background circle
BackgroundHex: "#dc582a",
// optional value
HTMLFill: "rgb(249, 81, 19, 0.2)",
//if you are not comfortable with SVG's, you can use standard icons instead! - just make sure you change the icon property of MenuIcon to ThisItem.StandardIcon StandardIcon: Icon.Home },
{ MenuItem: "Add new",
MenuScreenNavigate: 'Add new',
BackgroundHex: "#038761",
HTMLFill: "rgb(85, 226, 131, 0.1)",
StandardIcon: Icon.Add },
{ MenuItem: "Profile",
MenuScreenNavigate: Profile,
BackgroundHex: "#007FAA",
HTMLFill: "rgb(17, 130, 253, 0.2)",
StandardIcon: Icon.AddUser },
{ MenuItem: "Settings",
MenuScreenNavigate: Settings,
BackgroundHex: "#d3273e",
HTMLFill: "rgb(245, 111, 174, 0.2)",
StandardIcon: Icon.Settings } )
- Create screens in your app to match the MenuItem name. - Change the StandardIcon to whatever out-of-the-box icon you'd like to use. - If you would like to use the animated SVG's, please note there are some additional steps to be carried out. The SVG code is contained within the MenuLogo image control - as we are changing the colour of the SVG's dynamically based on the active screen, we are using the Switch() function. I have recently blogged step by step how to achieve this - https://www.kristinekolodziejski.com/blog/building-a-beautiful-power-apps-mobile-navigation-menu-svg...
The component has four main properties:
- MenuItems is the table of menu items pasted above,
- Animation - this is applicable to SVG's in this component only - if you want the active screen SVG to float, please set that to true, otherwise set it to fault.
- IconSVGorStandard - if you want your icons to be SVG's, set that to true. If you are not comfortable SVG's and want to use out-of-the-box icons instead, please set that to false.
I have added as many comments to the component itself to help you understand how it's built!
However, if you have any questions, issues or comments - as always, please reach out to me on my socials and I'll be more than happy to help 😊
Kristine
