Power apps allows developers to create re-usable code called components. We developed many such components to use in our projects. One of them is a hamburger navigation menu component with two levels of menu items.
FEATURES:
- Collapsible: Hamburger menu collapses to just display icons.
Component width is changing, when we click on hamburger icon.
2. Flexible number of submenu items: If the menu item has submenu items a dropdown appears, if selected we can see the sub menu items associated with a menu item.
Flexible height of the sub menu items.
HOW TO USE IN YOUR APP:
- Download the component from the Power Apps component community, import the component into the Solution/App.
- Update the menu and sub menu items according to your requirements and start using the component in the app.
Components have custom properties where we give an input and take the output from the components. These are classified into Input and Output Properties.
CUSTOM PROPERTIES:
Custom Properties with Input and Output Properties.
Input Properties:
- Menu Items: Input property consisting of a table with menu items.
//Menu Items Input Property...
Table(
{
ID: 1,
MenuLbl: "Home", //change the menu label
Screen: App.ActiveScreen, //place the navigation screen name
Icon: Icon.Home,
SubMenuVisible: false
},
{
ID: 2,
MenuLbl: "My Profile",
Icon: Icon.AddUser,
SubMenuVisible: true
},
{
ID: 3,
MenuLbl: "My Orders",
Icon: Icon.Shop,
SubMenuVisible: false
}
)2. Sub-menu Items: Input property consisting of a table with sub-menu items.
//Sub menu Items Input Property...
Table(
{
MenuRef: 2, //MenuRef-->it maps to menu item ID
SubMenuID: 1,
SubMenuLbl: "Change Contact Number", //change the submenu item label
Screen: App.ActiveScreen, //place the navigation screen name
},
{
MenuRef: 2,
SubMenuID: 2,
SubMenuLbl: "Change Password",
Screen: App.ActiveScreen
},
{
MenuRef: 2,
SubMenuID: 3,
SubMenuLbl: "Change Address",
Screen: App.ActiveScreen
},
{
MenuRef: 2,
SubMenuID: 4,
SubMenuLbl: "Change Profile Picture",
Screen: App.ActiveScreen
}
)Output Properties:
Menu-Width: Output Property of menu width changes when clicked on hamburger icon.
If menu width is not fixed, the component will take the entire app width. Since, we want the collapsible feature for our menu component. We fix the width of 1/6th of App Width if the menu is open and if the menu is closed, the width is fixed to 30.
/* menu width is dynamic i.e varOpenMenu is true the menu width is 1/6th of App
width and if varOpenMenu is false the menu width is 1/40th of App width*/
If(
varOpenMenu, //variable return a boolean value when hamburger icon is clicked
App.Width/ 6,
App.Width/ 40
)CONCLUSION:
Creating a Two-level Hamburger menu having
- Collapsible hamburger menu width and
- Flexible number of the submenu items gallery when a menu item is expanded.
Hi,
Thanks for your work. I want to ask about sub menu.
It has different distance each number of sub menu.
You can find below pic.
Do you have any idea to fix it?
@SaiVittal I added this to my power apps canvas app onstart property, to build the main menu and sub menu items:-
ClearCollect(
MenuItems,
Table(
{
ID: 1,
HMenuLbl: "Home",
Screen: Home,
Icon: Icon.Home,
HSubMenuVisible: false
},
{
ID: 2,
HMenuLbl: "Settings & Configuration",
Screen: 'Settings Configurations List',
Icon: Icon.Alarm,
HSubMenuVisible: false
},
{
ID: 3,
HMenuLbl: "Media",
Screen: 'Media List',
Icon: Icon.Bus,
HSubMenuVisible: false
},
{
ID: 4,
HMenuLbl: "Asset Types",
Screen: 'Asset Type List',
Icon: Icon.Database,
HSubMenuVisible: false
},
{
ID: 5,
HMenuLbl: "Issue Types",
Screen: 'Issue Type List',
Icon: Icon.Database,
HSubMenuVisible: false
},
{
ID: 6,
HMenuLbl: "Technicians",
Screen: 'Technicians List',
Icon: Icon.People,
HSubMenuVisible: false
},
{
ID: 7,
HMenuLbl: "Vendors",
Screen: 'Vendors List',
Icon: Icon.Database,
HSubMenuVisible: false
},
{
ID: 8,
HMenuLbl: "Assets",
Screen: 'Assets List',
Icon: Icon.Currency,
HSubMenuVisible: false
},
{
ID: 9,
HMenuLbl: "Spare Parts",
Screen: 'Spare Parts List',
Icon: Icon.Currency,
HSubMenuVisible: false
},
{
ID: 10,
HMenuLbl: "Streets",
Screen: 'Streets List',
Icon: Icon.Cars,
HSubMenuVisible: false
},
{
ID: 11,
HMenuLbl: "Locations",
Screen: 'Locations List',
Icon: Icon.Location,
HSubMenuVisible: false
},
{
ID: 12,
HMenuLbl: "Directions",
Screen: 'Directions List',
Icon: Icon.Location,
HSubMenuVisible: false
},
{
ID: 13,
HMenuLbl: "Networks",
Screen: 'Networks List',
Icon: Icon.AddLibrary,
HSubMenuVisible: false
},
{
ID: 14,
HMenuLbl: "Packages",
Screen: 'Packages List',
Icon: Icon.AddLibrary,
HSubMenuVisible: false
},
{
ID: 15,
HMenuLbl: "Contracts List",
Screen: 'Contracts List',
Icon: Icon.ListScrollWatchlist,
HSubMenuVisible: false
},
{
ID: 16,
HMenuLbl: "Booking Calendar",
Screen: 'Booking Calendar List',
Icon: Icon.CalendarBlank,
HSubMenuVisible: false
},
{
ID: 17,
HMenuLbl: "Booking Without Print List",
Screen: 'Booking Without Print List',
Icon: Icon.CalendarBlank,
HSubMenuVisible: false
},
{
ID: 18,
HMenuLbl: "test",
Screen: 'test',
Icon: Icon.DockCheckProperties,
HSubMenuVisible: false
},
{
ID: 19,
HMenuLbl: "test2",
Screen: 'test2',
Icon: Icon.DockCheckProperties,
HSubMenuVisible: false
},
{
ID: 20,
HMenuLbl: "Work Orders List",
Screen: 'Work Orders List',
Icon: Icon.DockCheckProperties,
HSubMenuVisible: false
},
{
ID: 21,
HMenuLbl: "Accident Limit",
Screen: 'Tickets Limit List',
Icon: Icon.Alarm,
HSubMenuVisible: false
},
{
ID: 22,
HMenuLbl: "Accident List",
Screen: 'Accidents List',
Icon: Icon.Alarm,
HSubMenuVisible: false
},
{
ID: 23,
HMenuLbl: "KPI List",
Screen: 'KPI List',
Icon: Icon.ListWatchlistRemind,
HSubMenuVisible: false
},
{
ID: 24,
HMenuLbl: "Reports",
Screen: 'Next Day Campaign DashBoard',
Icon: Icon.ListWatchlistRemind,
HSubMenuVisible: true
})
);
ClearCollect(
SubMenuItems,
Table( {
MenuRef: 24, //MenuRef-->it maps to menu item ID
SubMenuID: 1,
SubMenuLbl: "KPI Dashboard", //change the submenu item label
Screen: 'KPI Dashboard' //place the navigation screen name
},
{
MenuRef: 24,
SubMenuID: 2,
SubMenuLbl: "Per Medium Dashboard",
Screen:'Per Medium DashBoard'
},
{
MenuRef: 24,
SubMenuID: 3,
SubMenuLbl: "Asset Dashboard",
Screen: 'Assets DashBoard'
},
{
MenuRef: 24,
SubMenuID: 4,
SubMenuLbl: "Asset Total Dashboard",
Screen: 'Assets Total DashBoard'
},
{
MenuRef: 24, //MenuRef-->it maps to menu item ID
SubMenuID: 5,
SubMenuLbl: "Spare Parts DashBoard", //change the submenu item label
Screen: 'Spare Part DashBoard'//place the navigation screen name
},
{
MenuRef: 24,
SubMenuID: 6,
SubMenuLbl: "Per Medium Total Dashboard",
Screen:'Spare Parts Total DashBoard'
},
{
MenuRef: 24,
SubMenuID: 7,
SubMenuLbl: "Accidents DashBoard",
Screen: 'Accidents DashBoard'
},
{
MenuRef: 24,
SubMenuID: 8,
SubMenuLbl: "Printing DashBoard",
Screen: 'Printing DashBoard'
},
{
MenuRef: 24,
SubMenuID: 9,
SubMenuLbl: "Posting DashBoard",
Screen: 'Posting DashBoard'
},
{
MenuRef: 24,
SubMenuID: 10,
SubMenuLbl: "Next Day Campaign DashBoard",
Screen: 'Next Day Campaign DashBoard'
})
);
then inside each screen i added the following collections inside the related NavigationItems & SubMenuItems parameters:-
but currently i only get the main menu items without the submenu items as follow:, where if i click on the submenu icon beside the "Reports" main menu item, the submenu items will not get shown, as follow-
any advice?
