Using menu layers

Contents[Hide]

1. Overview

This article explains how to use a menu layer when including a hamburger menu on the dashboard. A menu layer has its own template grid consisting of a single template cell allowing you to keep components on this layer separate from the main template grid.

2. Walkthrough

This walkthrough will guide you through the steps necessary to create and configure a menu layer containing a collapsible navigation menu that can be used to navigate between various views. Ensure that you have the separate dashboards or other views ready before starting the walkthrough.

When using Dundas BI's responsive re-size mode, content is automatically re-organized 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 smaller screen sizes, you may need to further minimize the amount of space taken up for navigation or other options on your dashboard. One way of accomplishing this is by including a hamburger menu (also known as the menu button or navigation drawer) placed on a menu layer.

2.1. Add a menu button

Add a menu button image that will be used to open the navigation menu on the dashboard.

From the Explore window, expand images and drag and place a suitable image onto the dashboard. Ensure that the image is positioned properly on the dasboard.

Button image positioned on the top-left of the dashboard
Button image positioned on the top-left of the dashboard

2.2. Add a menu layer

Add a menu layer. For this example, this layer will contain the menu component and a close button.

Note
When you add a new menu layer, all visible layers are deactivated and any other menu layers on the dashboard become active allowing you to edit only the menu layers.

In the Layers window, click Add in the toolbar and then select the menu layer. 

Add a new menu layer
Add a new menu layer

Rename the layer to Menu.

2.3. Add a close button

From the Explore window, expand images and drag a suitable image onto the menu layer. This image will serve as the close button and will allow you to close the navigation menu and switch back to the main layer.

Add a close button
Add a close button

Position the button in such a way that when viewing the dashboard, the button should be aligned properly in relation to the menu button image.

2.4. Add and configure a menu component

You can use any suitable means of navigation like icons, images or buttons. For this walkthrough we’ll add and configure a menu component on the menu layer.

Ensure that you are on the menu layer. Go to the toolbar, click Components, and then click Menu.

Add a menu component
Add a menu component

Positon and size the menu component suitably, add the other views as menu items and configure them as required.

Add menu items to the menu component
Add menu items to the menu component

Configure the navigation targets for each of the menu items. For more information about using the menu component, see the How to set up menu navigation article.

2.5. Configure click actions

Configure the click actions on the menu button and the close button to allow closing and opening the menu as required when viewing.

2.5.1. Configure the click action on the Menu button

One of the options to configure the interaction on the menu button can be a simple click action.

Go to the main layer and select the menu button. In the Properties window, on the main tab, scroll down if needed to the Actions category.

Configure click actions
Configure click actions

Expand the Click action, click the Menu button on the right and choose Change Layer.

Configure change layer
Configure change layer

Under Hide Layers, select the main layer. Under Shown Layers, select the Menu layer.

2.5.2. Configure the click action on the Close layer

Go to the Menu layer and select the Close button. In the Properties window, on the main tab, scroll down if needed to the Actions category.

Expand the Click action, click the Menu button on the right and choose Change Layer.

Under Hide Layers, select the Menu layer and under Shown Layers, select the main layer.

The hamburger menu button is now added and configured and can navigate through the various views.

Hamburger menu
Hamburger menu

When viewed in responsive mode, the menu and the menu button will remain in position when viewed on various screen sizes.

3. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours:
Phone: 9am-6pm, ET, Mon-Fri
Email: 7am-6pm, ET, Mon-Fri