Using menu layers

Contents[Hide]

1. Overview

This article explains how to use a menu layer when including a hamburger menu on the dashboard. 

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. You can accomplish this by including a hamburger menu (also known as the menu button or navigation drawer) placed on a menu layer. The menu layer allows you to dock the navigation menu or other navigation components into position, ensures that it stays in position and allows scrolling when the height is restricted when viewing on a landscape screen.

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.

2.1. Add a layer

On the main dashboard, create a new layer.

In the Layers window, click Add in the toolbar and then add a new layer to the view.

Add a layer
Add a layer

The new layer is added and is the current layer by default as indicated by its blue border and all the other layers are hidden. Rename the layer to Button.

2.2. Add a menu button

From the Explore window, expand images and drag a suitable image onto the layer. This image will serve as the menu button that will be used to open the navigation menu.

Add a button
Add a button

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

Position the button appropriately
Position the button appropriately

2.3. 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.4. 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 other dashboard components.

2.5. 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 here.

2.6. 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.6.1. Configure the click action on the Button layer

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

Go to the Button 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 Button layer. Under Shown Layers, select the Menu layer.

2.6.2. Configure the click action on the Menu 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 Button 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 docked 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