Using Hamburger Menu in a Mendix Native Mobile Application

There are several strategies to provide access to the different pages of an application. Despite some criticism, the hamburger menu is trendy amongst the UI/UX community.

Use Case

Our mission is to develop a native application in which the main navigation is guided through a hamburger menu. The main advantages of this solution are:

• The space freed in the pages, compared to the bottom bar navigation.
• The UX is focused on the application's main area, with no distractions such as overlay badges on icons at the bottom bar.
• The possibility of using more routes, again compared to the bottom bar (it gets clumsy when using 5+ items).

As disadvantages:

• It requires one additional click to get to the destination page. This could reduce the application's engagement.
• It may hide the application's main features. That is, the application can be less intuitive than one that uses the bottom bar navigation.

Solution

• [1] From Studio Pro, create a new application using the Blank Native Mobile app.
• [2] In the App Explorer view, navigate to App/Marketplace_modules/Atlas_Core/NativeMobile/Layouts/Phone.
• [3] Notice that the item NativePhone_SideMenu is excluded from the project. Let’s copy this item to our project, include it in the project, and change its name to MyPhone_SideMenu.
• [4] In the item App/Navigation, on the Native mobile (tablet & phone) tab, remove the Home item from the Bottom bar items list. The SideMenu layout is “incompatible” with bottom bar items (more on this later).

[5] Open the Home_Native page, you’ll notice an error in the Errors View. Let’s get rid of this error by changing the Layout property to MyPhone_SideMenu.

• [6] Notice in the picture above that there’s a Placeholder at the left side of the page. Unfortunately, this placeholder is not working fine. Let’s remove it, but not here on the page, but directly on the MyPhone_SideMenu layout instead. It should resemble as shown below:

MyPhone_SideMenu Layout without the Placeholder at the left side

• [7] Create a Snippet with the structure of your side menu. This snippet can be as below, combining LayoutGrids, StaticImages, Containers and Texts. Create some sample actions for the menu items, such as navigating to pages or calling Nanoflows:

Snippet to be used as SideMenu. Some styling adjustments are required.

• [8] Drag this snippet to the left of theHomeNative page.

Snnipet placed at the HomeNative page

• [9] After some adjustments, the final result could be as shown below:

Animation showing the usage of Sidemenu with Mendix

• [10] The Layout of Page1 also is MyPhone_SideMenu , while Page2 is NativePhone_TopBar. Notice the difference: the latter shows a back button, and the former shows the hamburger menu.

Conclusion and Comments

• The NativePhone_SideMenu is excluded from the Atlas_Core . There’s a reason for that. I personally believe this is due to the fact that there are some issues to be fixed, and they weren’t prioritized.
• The page transitions seem weird to me. Need to find a way to configure them in a way that the flickering is reduced.
• The buttons on the bottom bar can only call a page. Using the side menu, you don’t have this limitation.
• If you turn on the Botton bar to Yes in the MyPhone_SideMenu layout, it’s possible to use both the bottom bar and the side menu. That is, you can combine the best of the two approaches to design your app (see Linkedin or GMail).
• Certainly is a feature that can be used in Production after some adjustments.