Hello #PowerAddicts,
Have you ever had a requirement to build Mega Nav in Power Apps? If yes, then you have it - "Power Mega NAV Component." Feel free to download and use.
Purpose:
- Mega Nav will help multi-screen APP navigation easy and accessible.
- Very helpful for educational apps
Key Features:
- A Collection based, fully dynamic mega navigation
- Three levels of navigation
- Brand as per your APP branding
- Icon support (optional)
- Flexible column settings (How many columns in the 2nd level)
Configurable Properties:
- Navigation Items: Collection(Flat structure instead nested for simplicity) that contains Navigation elements/items.
Collection Elements:
ID*: Unique ID of a navigation item
Title*: Display Name of a navigation item
Icon(Optional): Icon for a navigation item
MenuType*: Parent or Child
ParentMenu: If MenuType "Child," Title of the Parent Item
MenuOrder: Order in which Top Nav display
LinkType: screen or url
NavLink: If LinkType "url", add the url path else ""
Screen: If LinkType "screen," add the screen name
Example:
Table(
{
ID: 1,
Title: "Menu1",
Icon: Icon.Home,
MenuType: "Parent",
ParentMenu: "",
MenuOrder: 1,
NavLink: "",
LinkType: "screen",
Screen: App.ActiveScreen
},
{
ID: 2,
Title: "Menu2",
Icon: "",
MenuType: "Parent",
ParentMenu: "",
MenuOrder: 2,
NavLink: "",
LinkType: "screen",
Screen: App.ActiveScreen
},
{
ID:10,
Title: "Home",
Icon: "",
MenuType: "Child",
ParentMenu: "Menu1",
MenuOrder: 1,
NavLink: "",
LinkType: "screen",
Screen: App.ActiveScreen
},
{
ID:11,
Title: "SubMenu2",
Icon: "",
MenuType: "Child",
ParentMenu: "Menu1",
MenuOrder: 2,
NavLink: "https://web.powerapps.com/",
LinkType: "url",
Screen: App.ActiveScreen
}
)
- TopMenu Fill: Top Menu background fill color
- Hover Fill: Top Menu Hover fill color
- Selected Fill: Top Menu selected Menu background fill color
- SubMenu Columns: Number columns to display on 2nd nav level
- SubMenu background Fill: 2nd level nav background fill color
Note: After Importing component, upload "baseline_arrow_drop_down_black_18dp.png" and assign it to "ImgDownArrow"
Let me know your feedback and if you have any questions?
Connect with me on:
Twitter: @deepak_s22
Linkedin: Deepak
Regards,
Deepak S
