Implementing a mobile optimized navigation menu

1. Overview

With so much time now spent on our mobile devices, more users may want to be able to view a dashboard on their phone or tablet. For certain dashboards, designing a single version of the dashboard that adapts to fit its content onto any screen size can be possible by making use of Dundas BI's Responsive re-size mode. This will automatically re-organize the content as needed so that it is still readable, fills the given screen real estate, and allows all content to be accessed by scrolling in one direction.

For the smallest screen sizes, you may need to further minimize the amount of space taken up for navigation or other options on your dashboard. This article explains how to add a hamburger menu (also known as the menu button or navigation drawer) for those devices to navigate between dashboards.

2. Understanding the browser window resizing event

To determine when to show the full-size navigation buttons and when to show the hamburger menu button, it is important to understand when the dashboard window resizing event is fired. When the dashboard loads for the first time, Dundas BI detects the browser’s window size and adjusts the dashboard canvas to fit. For this example, it is required to detect the browser window size when loading the dashboard and hide or show the navigation buttons accordingly.

When using smaller screen devices (such as smartphones), users may rotate the device to change the display orientation between portrait and landscape mode. This is another case to consider for hiding or showing different navigation buttons, and if you decide to handle it, the dashboard's Re-Size actions can be used in a similar way as done for the dashboard's Ready actions below.

5. Adding the scripts

For this example, we will show the hamburger menu if the browser window is less than 1020 pixels in width. In this case, we want to show the HamburgerLayer and hide the NavigationLayer; otherwise, we want to show the NavigationLayer and hide the HamburgerLayer.

To achieve this, use the following script under the Ready action of the dashboard:

While the dashboard is being viewed on a smaller screen, you want to show a dropdown menu if the user clicks/taps on the hamburger menu button. The idea is to show the DropdownLayer if it is hidden, and vice versa. To achieve this, add the following script under the Click action of the Hamburger menu button image.

6. Testing the hamburger menu button

If you open the dashboard on a small screen device, it will detect the browser window size when the dashboard is at the Ready state and will show the Hamburger menu button on the top left corner, as per the design.

If you tap the Hamburger menu button, a dropdown menu with three buttons will appear underneath the Hamburger button.