How to set up menu navigation
1. Overview
The Menu component lays out a menu of items that users can click to navigate to content, expand submenus, and trigger other interactions. You can customize it a variety of ways to suit your design and layout needs.
2. Add a menu component
Go to the toolbar, click Components, and then click Menu.
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 a folder of views onto the empty menu to populate the menu items. For this example we chose to drag a folder containing various views.
The views contained in the folder are listed as menu items in the menu component, and you can click to navigate to each one.
3.2. Add menu items manually
Alternatively, you can use the Properties window to add individual items manually or select a folder to populate the menu.
3.2.1. Enter manual items
Go to the Properties window and select the menu component on the canvas.
Set the Display property to Manual Items.
Click to expand Items (in our example, we have some existing menu items added already by dragging). Click the + button to add a new item.
Click the new item to edit it.
Typically, menu items have a navigation target set up on them directly. Click the + button under Navigation Target to set one, then click the Navigation Target link to choose the target.
Select a view to navigate to. For this example, we selected the Sales average view.
Click Submit at the bottom of the dialog. You can use the properties in the Text tab to edit the display text of this item.
3.2.2. Select a folder
You can add items dynamically to the menu component by selecting an entire folder to display in 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, go to the Properties window and set the Display property to Folder.
Click the Display Folder link.
Select a folder from the Open dialog to add to the menu. For this example, we selected the Performance Dashboards folder.
Click Submit at the bottom of the dialog. All the views from the folder are displayed as items in the menu.
3.3. Add submenu items
You can add additional levels of menu items or submenus, which you can access under another menu item.
To add an item under an existing menu item, drag a file from the Explore window and drop it onto the existing item.
An arrow is displayed to the right of the menu item, called an indicator icon, indicating that it can be expanded when viewing. This icon can be customized in the menu properties.
You can also add submenu items manually in the Properties window. Select one of the items in the menu's Items property to edit it, or click the item in the menu directly.
Now click to add an item to this Items property.
Click on the new item to edit its settings.
This submenu item can be set up manually just like the top level menu item shown earlier. You can also add another level of submenu items below this item.
4. Customization properties
You can customize the appearance of the menu and its items in the Properties window.
4.1. Style menu items
4.1.1. Style individual menu items
You can choose to style each menu item individually. In this case, the menu's Display property should be set to Manual Items.
You can click to select a menu item directly on the menu component itself, or click to edit an item under the Items property.
In the Look tab, you can 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.
4.1.2. Item styles
You can also specify styles for all the items at once in each level of the menu. This option will work if you are dynamically populating items from the file system. If you have submenus, you can set up a distinct style for each level.
To add a new style, go to the menu's properties, click on the Look tab, and click + under Item Styles.
Click the new item to edit it. If you have multiple levels of items (or submenus), increase the Item Depth property to the submenu level you want to customize. For example, if set to 1, items displayed directly under a top-level menu item will be styled.
You can add more than one item style for the same item depth. In this case, the styles act as a palette, for example if you wanted to alternate the items between two background colors. (This applies to Dundas BI version 8 and higher.)
4.2. Open
Use the menu's Open property to specify what happens or how the navigation works 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 custom interaction (Nothing option)
If you choose the Nothing option, you can add custom actions for each item instead as described in a later section.
4.3. Submenu properties
You can use the following properties of the menu in the Look tab to customize how submenus are displayed when viewed:
- Show As Popup - Enable to display submenus as a popup, otherwise they are expanded below or to the right of the parent item.
- Show On Hover - Displays submenus by hovering over the parent item rather than clicking. When enabled, the Hover Delay property can be set in milliseconds.
- Disable Auto Collapse - Selecting this option allows multiple menu items to be expanded at the same time.
4.4. Horizontal layout
In the Layout tab, under Common, select the menu's Horizontal Layout property to display the items side-by-side horizontally rather than in a vertical column.
4.5. Set menu items to active
If needed, you can use the Active property on an individual menu item to ensure that a menu item is initially in the Active state when the dashboard is loaded during viewing. If this item contains submenu items, this expands the submenu.
4.6. Icons
You can add your own icons to identify each menu item and/or to indicate a submenu, for each of the various states of the menu items:
- Rest
- Active
- Hover
4.6.1. Add item icons
To add an icon to the left of the item's text, select the menu item, and go to the Look tab in the Properties window. Click + under the Rest Item Icon property, for example, to set it.
To use an image uploaded to Dundas BI, click the Select Icon link, select an image in the Open dialog, then click Submit.
The selected icon is added to the left of the text.
You can add different icons for the other states of the menu item, or allow the rest icon to display for the other states.
4.6.2. Add indicator icons
You can add your own icon to the right of the text to indicate that a menu item can be expanded to show submenu items rather than use the default indicator.
Select the menu item, go to the Look tab in the Properties window, and click the + under the Rest Indicator Icon property, for example.
To use an image uploaded to Dundas BI, click the Select Icon link, browse and select an icon in the Open dialog, then click Submit.
The selected icon is added to the right of the text.
When you have a custom indicator icon set, you can enable the Always Show Indicator Icon property in the Layout tab if you want it to appear even if there are no submenu items.
4.6.3. Change icon size
The Icon Size property in the Layout tab 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.
5. Custom interactions
You can set up your own interactions for menu items rather than set a navigation target on them directly. The menu's Display property should be set to Manual Items for this to work.
For example, go to the Properties window for the menu and click to expand the Item Clicked actions.
Click the menu icon on the right to choose which type of action to add, such as Navigate or Change Layer.
You would typically need to add a separate action for each item. Click an action to edit it.
On each action, you can set the Bound Visual setting to correspond to a specific menu item so that each one does something different.
