How to set up menu navigation

1. Overview

The Menu component lets you add menu navigation to a dashboard. This component can be placed on a dashboard to help viewers navigate through other views or custom items quickly.

2. Add a menu component

Go to the toolbar, click Components, and then click Menu.

Add a menu component
Add a menu component

3. Add menu items

You can add items to the menu by dragging them directly from the Explore window or you can add them manually by specifying which items to include from the Properties window.

3.1. Drag views or folders

From the Explore window, drag a view or folder on to the empty menu container to populate the menu items. For this example we chose to drag a folder containing various views.

Important
You can drag only one folder to the menu component at a time.

Drag a view or folder from Explore
Drag a view or folder from Explore

By default, the views contained in the folder are listed as menu items in the menu component.

Views are listed in the menu component
Views are listed in the menu component

3.2. Add menu items manually

Optionally, you can specify menu items manually or select a folder to populate the menu. You can choose any of the following options:

  • Manual Items
  • Folder

3.2.1. Enter manual items

For this example, we are adding an additional menu item to the ones already populated previously. To add menu items by manually specifying them, with the menu component selected, in the Properties window, from the Display list, select Manual Items.

Select Manual Items
Select Manual Items

The existing menu items are listed under Items. Click Items.

Click Items
Click Items

Scroll down to the newly added menu item and click it. Under Common, click Navigation Target and then click the Navigation Target link.

Select a view or folder to add as a menu item. For this example, we selected the Sales average view.

Select view
Select view

Click Submit. The Sales average view is added to the menu. You can use the Text properties to edit the display text if needed.

3.2.2. Select a folder

You can add items dynamically to the menu component by selecting an entire folder to display as the menu by using the Folder option. When you use this option, any items added or removed from the folder will reflect in the list of menu items.

With the menu component selected, in the Properties window, from the Display list, select Folder.

Select Folder
Select Folder

Click the Display Folder link.

Click Folder
Click Folder

Select a folder from the Open dialog to add to the menu. For this example, we selected the Sales average view.

Important
You cannot add more than one folder at a time.

Select folder
Select folder

Click Submit. All the views from the performance dashboards folder are added as items on the menu.

3.3. Add submenu items

If needed, you can add submenu items to the existing menu items by dragging the file from the Explore window and dropping it on to a parent menu item. The submenu item is automatically created and by default, an arrow is displayed to the right of menu item (indicator icon) indicating that it can be expanded when viewing. This can be customized, if needed.

To add submenu items manually, with the menu component selected, in the Properties window, under Items, select a menu item. In this example, we'll add a second-level item to the Sales by country map menu item.

Select a menu item
Select a menu item

On the Main tab, under Common, click to add an item.

Click to add an item
Click to add an item

Click the Menu Item link. In the Menu Item properties window, on the Main tab, under Common, click Navigation Target and then click the Navigation Target link.

Select a view or folder to add as a menu item.

A new submenu item is added.

New sub menu item added
New sub menu item added

4. Customization properties

You can customize the appearance of the menu from the Properties window.

4.1. Style menu items

4.1.1. Style individual menu items

You can style each menu item individually. Ensure that the Display property is set to Manual Items.

Select a menu item in the menu component and in the Properties window on the Look tab, you can set properties that allow you to change the background, border or icon when the menu item is in various states during viewing such as at rest, when hovered over or when active.

Styling menu items
Styling menu items

4.1.2. Style menu levels

You can specify styles for each level on the menu before they are populated. This option is useful when dynamically populating items from the file system. When configured, all new items on the menu will be styled according to the menu level style defined.

To style a specific level of the menu, click to add a new style.

Style menu levels
Style menu levels

Click the Style for depth link and then for Item Depth enter a number that represents a child level on the menu. For example, if set to 1, then any first-level child menu items will be styled accordingly.

Select item depth
Select item depth

4.2. Open

Use the Open property to specify what happens (or where to navigate to) when a menu item is clicked. The available options are:

  • Open the clicked item in the same window
  • Open the clicked item in a new window
  • Open the clicked item in an embedded view (i.e., a view container elsewhere on the canvas)
  • Invoke a script action (Nothing option)

You can use the Nothing option to set up a script action for the menu. See the Using interactions article for more information.

Open property options
Open property options

Note
It is recommended to use the Item Clicked event instead of the Click event when there are multiple items.

4.3. Display properties

You can use the following properties to customize how the menu items are displayed when viewed:

Menu item display options
Menu item display options

  • Show as popup : Display menu items inline or as a popup.
  • Show on hover : Display submenu items by hovering over a menu item. When this property is set, you must also set the Hover Delay property in milliseconds.
  • Disable auto collapse : Expand multiple menu items simultaneously.

4.4. Horizontal layout

In the Layout tab, under Common, select the Horizontal Layout property to display the menu in a horizontal format. 

4.5. Background

In the Look tab under Appearance, click the plus sign to add a background for the menu.

Menu styling properties
Menu styling properties

4.6. Text

You can style the menu item text. With the menu component selected, in the Properties window, on the Text tab, you can edit the tooltip text and edit all the font settings as required.

Text styling properties
Text styling properties

4.7. Set menu items to active

If needed, you can use the Active property to ensure that a menu item is always in the Active state when the dashboard is loaded during viewing. This property is saved and will apply when the dashboard is opened for viewing.

With the Display property set to Manual Items, select the menu item from the menu component and in the Properties window, under Options, select the Active checkbox.

Active property
Active property

The Active style will be applied to the selected menu item. It will also remain expanded to show submenu items, if any. 

4.8. Icons

You can add icons for the various states of the menu items and can customize them.

4.8.1. Add item icons

You can add an icon to the left of the text when a menu item is in the following states:

  • Rest
  • Active
  • Hover

Select the menu item for which you want to add an icon.

Select a menu item
Select a menu item

To add an icon when the menu item is in a state of rest, in the Properties window on the Look tab, click the Rest Item Icon property.

Rest Item Icon properties
Rest Item Icon properties

Click the Select Icon link, and from the Open dialog, browse and select a suitable icon. Click Submit.

The selected icon is added to the left of the text.

Icon is added
Icon is added

You can similarly add icons for the other states of the menu item as needed.

4.8.2. Add indicator icons

You can add an icon to the right of the text to indicate that a menu item can be expanded to show submenu items. A default indicator is automatically added for menu items that can be expanded. However, this can be customized. For example, if you want to remove the default indicator icon, you can set the it to blank for the Rest or Active states.

You can also add a custom indicator icon when a menu item is in the following states:

  • Rest
  • Active
  • Hover

 Select the menu item for which you want to add an icon.

Select a menu item
Select a menu item

Since the Sales by Country Map menu item has submenu items, Dundas BI has automatically added the default indicator item. For this example, we'll customize the rest indicator icon.

To customize the indicator icon, in the Properties window on the Look tab, click the Rest Indicator Icon property.

Rest Indicator Icon properties
Rest Indicator Icon properties

Click the Select Icon link, and from the Open dialog, browse and select a suitable icon. Click Submit.

The selected icon is added to the right of the text.

Rest indicator icon added
Rest indicator icon added

You can similarly add indicator icons for the other states of the menu item as needed.

4.8.3. Padding

The Padding property allows you to control the padding around a custom icon allowing more customization.

4.8.4. Change icon size

The Icon Size property allows you to set the icon size for both, the item and the indicator icons. The size specified applies to the height and width of the icons.

From the Properties dialog, in the Layout tab, click the plus sign under Icon Size and then enter a size in pixels.

Rest indicator icon added
Rest indicator icon added

4.8.5. Always show indicator icon

By default, the indicator icon is shown only when a menu item has submenu items. If using a custom indicator icon, you can use the Always Show Indicator Icon property to ensure that it is always shown, whether there are submenu items or not.

5. 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