INTRODUCTION:
Power apps allow developers to create reusable code called components. We developed many such components to use in our projects. One is a hamburger navigation menu component with two levels of menu items. This was submitted to the community. This article describes the features and usage of this component in your app.
FEATURES:
- Collapsible: The hamburger menu collapses to display icons.
2. Flexible number of submenu items: If the menu item has submenu items, a dropdown appears; if selected, we can see the submenu items associated with a menu item.
HOW TO USE IN YOUR APP:
- Download the component from the Power Apps component community and import the component into the Solution/App.
- Go to Import component in the components tab and click Upload file.
3. Component gets added into the app under the Insert Custom tab.
4. Go to App → On-Start App property, create a collection for menu and sub-menu items. So that the menu and sub-items load at the start of the app at once. Follow the on-start code for reference.
//On-Start code of modifying the menu and submenu items from the component
/*You can change the JSON Data of menu and sub menu items label and screen
names navigation */
Concurrent(
ClearCollect(
colMenuItems, //creates collection for menu items
Table(
{
ID: 1,
MenuLbl: "Home", //change the menu label
Screen: App.ActiveScreen, //place the navigation screen name
Icon: Icon.Home,
SubMenuVisible: false //takes boolean value i.e, submenu to be present or not
},
{
ID: 2,
MenuLbl: "My Profile",
Icon: Icon.AddUser,
SubMenuVisible: true
},
{
ID: 3,
MenuLbl: "My Orders",
Icon: Icon.Shop,
SubMenuVisible: false
}
)
),
ClearCollect(
colSubmenuItems, //creates collection for sub-menu items
Table(
{
MenuRef: 2,
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
}
)
)
)
4. Override the menu items and sub-menu items property values with the collection names, respectively.
5. Similarly, add the hamburger menu to other screens, and now we can experience the features of collapsible menu width and flexible submenu items height in the application.
HOW IT WORKS:
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:
Input Properties:
- Menu Items: Input property consisting of a table with menu items.
/*Menu Items Input Property has ID, Menu Label , Screen to be navigated to,
Menu Icons, Sub menu Visible or not */
Table(
{
ID: 1,
MenuLbl: "Home",
Screen: App.ActiveScreen,
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 has Submenu Item ID, Submenu Item Label, Screen
Screen to be navigated to, Menu Ref Item ID*/
Table(
{
MenuRef: 2, //MenuRef-->it maps to menu item ID
SubMenuID: 1, //Submenu Item ID
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: The output Property of the menu width changes when clicked on the hamburger icon.
The component will take the entire app width if the menu width is not fixed. Since we want the collapsible feature for our menu component. We set the width to 1/6th of the App Width if the menu is open, and if the menu is closed, the width is fixed to 1/40th of the App width.
/* 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:
In conclusion, the Two-Level Hamburger Menu Component in Power Apps offers a significant advancement for creating intuitive app navigation. Its collapsible design, dynamic width adjustments, and customizable menu items enhance user experiences while conserving screen space.
This component’s adaptability suits various app types, from simple projects to complex solutions. To implement, follow the steps: download from the Power Apps component community, integrate, and customize as needed. Your contributions and feedback will further enrich the Power Apps ecosystem.
Incorporate the Two-Level Hamburger Menu to elevate user interactions and embrace the component-driven approach. Access it via the Power Apps component community to embark on a journey of enhanced app navigation and design.
Download the component from the Power Apps component community.
