How to create a Modern MULTI-LEVEL Side Menu in PowerApps

Summary

This video is the third part of a series on creating modern side navigation menus in Power Apps. It covers building a multi-level side menu, a design that features parent and child menu items, allowing for custom configurations and smooth navigation. The tutorial builds upon previous videos in the series, where a collapsible menu and light/dark mode toggle were introduced. The video guides users through adapting the base design to accommodate child items and teaches them how to make the menu flexible and interactive, with options for displaying and hiding child menus dynamically.

Takeaways

• 😀 This video is the third in a series about building modern side navigation menus in Power Apps.
• 😀 Previous videos covered compact and collapsible side menus, as well as custom light/dark mode toggles.
• 😀 The focus of this video is on creating a multi-level side navigation menu, which includes parent and child menu items.
• 😀 The multi-level menu design requires flexibility in the gallery size to accommodate varying numbers of child items.
• 😀 A flexible height gallery is used to ensure that each menu item fits its content size, with child items adjusting accordingly.
• 😀 The default expanded state of the multi-level menu removes the need for a collapse/expand toggle functionality.
• 😀 Modifying the menu content schema allows for the addition of child items, which are nested under their parent menu items.
• 😀 The flexible height gallery ensures that only the necessary space is allocated to each item, with variable height based on the content.
• 😀 Each menu item has the ability to open and close child items using a dropdown, with the state tracked by a variable.
• 😀 The video demonstrates how to integrate a drop-down feature for toggling child menus and adjusting icons to reflect the open/closed state.
• 😀 The final side navigation component allows for both parent and child menu items to navigate to pages, providing a flexible navigation experience.

Q & A

What is the main focus of the video?

The video focuses on building a multi-level side menu in Power Apps using basic controls, continuing a series of tutorials on modern Power App side navigation designs.

What were the key features covered in previous videos of the series?

The first video covered creating a compact Power App side menu, while the second video demonstrated building a slick collapsible side menu and a custom toggle for switching between light mode and dark mode.

How is the multi-level side navigation different from the collapsible side navigation?

The multi-level side navigation includes child items within menu items, whereas the collapsible side navigation only deals with expanding and collapsing the menu without child items.

Why does the video use a flexible height gallery for the multi-level side navigation?

The flexible height gallery is used to accommodate varying numbers of child menu items, allowing each menu item to dynamically adjust its height based on the number of child items it contains.

How does the menu layout change when transitioning to a multi-level side navigation?

The component width is set to 150, the toggle button for expanding/collapsing is removed, and the logo and menu labels are always visible, ensuring that the menu is always expanded.

What is the purpose of the nested table (level two menu)?

The nested table, or level two menu, is used to store child menu items, which may include additional sub-menu options for each parent menu item.

How are the child menu items rendered on the screen?

Child menu items are rendered using a second flexible height gallery inside the parent menu's container. The child items are displayed only when their corresponding parent menu is opened.

What functionality does the dropdown icon serve in the multi-level menu?

The dropdown icon allows users to open and close the child menu. It uses a condition to track which menu is open and changes its icon based on whether the child menu is expanded or collapsed.

How can users navigate to different pages in the multi-level side menu?

Both parent and child menu items can navigate to different pages. The parent menu items can be reordered, and the 'onSelect' property of the buttons is adjusted to either open the child menu or navigate to a page.

What steps are needed to set up the side navigation on a screen?

To set up the side navigation, you need to divide the screen into two parts using a horizontal container, place the side menu on the left, and the page content on the right. Then, ensure the menu content contains child items and is configured with correct properties.