Navigation Menu+

Overview

Navigation Menu+ provides reusable links to PI Vision displays, URLs, and asset-context destinations.

When to use it

Use this symbol when you need to:

• Create consistent navigation across a set of operational displays.
• Maintain shared menu definitions that can be reused and synchronized.

Before you begin

• Prepare the destination displays or approved URLs.
• Confirm which links must pass display time or asset context.

Add and set up the symbol

1. Select the symbol in the PI Vision symbol gallery.
2. Add the required data sources or asset context to the display.
3. Right-click the symbol and open its configuration pane.
4. Configure the minimum data, range, and display settings for a useful result.
5. Confirm that the symbol shows the expected data.

Use the symbol

Select a menu item to open its destination. Depending on its settings, the link can preserve time range, asset context, or open in a new browser tab.

Configure the symbol

Overview and behavior

The Navigation Menu+ creates an expandable navigation bar that can be placed along the left side or top of a display. You can define links and folder-style menus to build a structured navigation hierarchy across your PI Vision displays.

Because the bar is expandable, it collapses when not in use and adds no visual clutter to the display.

The menu configuration can be synchronized across displays: configure the symbol once and all other Navigation Menu+ symbols sharing the same AF attribute will update automatically. See Synchronize Configuration Across Displays for details.

Configure items

Use the Configuration pane to customize the symbol. The Main Menu section is where you build your navigation tree. Three entry types are available:

1. Menu: A container that holds other menus and links. Clicking a menu item opens its child items. A menu entry has the following settings:

• Title: The display name of the menu entry.
• Icon: The icon shown next to the menu name.
• Hide Title: When enabled, shows only the icon and suppresses the text label.

1. Hyperlink: A link that opens another display or external URL when clicked. See Configure a Navigation Link below for full settings.
2. Separator: A visual divider between menu items. Can be a simple horizontal line or a custom text label.

Configure a navigation link

When an item's type is set to Hyperlink, the following settings are available:

• Link: The target display URL or external URL to open.
• Open in New Tab: Opens the target in a new browser tab instead of the current one.
• Set Start and End Time: Passes the current display's time range to the linked display, or sets a fixed time range to use instead.
• Set Asset Context: Passes the current asset context - or a custom asset - to the linked display.

Configure settings

The Settings section controls the visual style and behavior of the navigation bar.

General

General settings control overall behavior and appearance:

• Mode: Expandable shows a toggle button; the menu appears only when clicked or hovered. Static keeps the menu always visible.
• Action: In Expandable mode, sets whether the menu opens on Click or Hover.
• Orientation: Vertical places the navigation bar on the left. Horizontal places it along the top.
• Multiple Rows: In Horizontal mode, enables wrapping of items to additional rows when they exceed the bar's width.
• Foreground: Sets the text color for all navigation menu items.
• Background: Sets the background color of the navigation bar.
• Font Size: Sets the font size for menu item text.
• Adapt to Zoom: When enabled, the font size scales automatically with the display's zoom level, keeping text legible at any zoom setting.
• Font Name: Sets the font family for all menu text.

Interactivity

• Dropdown: When enabled, child menus expand as a floating dropdown rather than inline within the navigation bar.

• Remember Selection: When enabled, the currently open display's corresponding menu item is highlighted automatically. Requires Dropdown to be disabled.
• Navigation History: When enabled, the full breadcrumb path to the current menu level is always visible. When disabled, only the most recently opened menu level is shown.
• Show Back: Adds a Back button that returns to the previously opened display.
• Show Kiosk Toolbar: Shows or hides the Kiosk toolbar, which lets users enable kiosk mode and toggle display toolbars and the time bar.

Title

• Show: Shows or hides the navigation menu title.
• Menu: Determines which title text to display. Root always shows the root item's name. Current updates to show the name of the active menu item - or, if Show Path is enabled, the full path to it.
• Show Path: Available only when Menu is set to Current. When enabled, the title shows the complete hierarchy path to the active item rather than just its name.

Name (example):

Path (example):

• Width: Fit sizes the title area to fit its text. Static sets a fixed width, keeping menu item positions stable when different display names have different lengths.
• Font Size: Sets the font size for the title text.
• Bold: Enables or disables bold weight for the title.
• Background: Sets the background color of the title area.
• Text: Sets the text color of the title.

Border

Provides styling options for the navigation bar border: width, color, and radius.

Buttons

Controls the visual style of individual navigation items: hover color, active color, padding, and icon size.

Logo

Upload a custom logo image. Configure its size and position within the navigation bar.

Configuration store

The menu configuration can be saved locally in the display, or in an AF Attribute of data type String (PI Points are not supported). Storing the configuration in an AF attribute lets you share and reuse it across multiple displays. See Synchronize Configuration Across Displays below.

Synchronize configuration across displays

Follow these steps to synchronize one Navigation Menu+ configuration across multiple displays:

1. Create an AF Attribute

Create an AF Attribute with data type String on any element. This attribute acts as the shared configuration store. Any change saved to this symbol will be written to the attribute, and all Navigation Menu+ symbols referencing the same attribute will pick up the change automatically.

1. Create the Navigation Menu+

With the Navigation Menu symbol type selected in PI Vision, drag the AF attribute onto the display. This creates a Navigation Menu+ symbol already linked to that attribute.

1. Set the Configuration Store

Right-click the symbol and scroll to the Save Configuration section. Set the Configuration Store to Data Source.

The configuration is now stored in the AF attribute. Add the same attribute to any other display to create a synchronized Navigation Menu+ that shares the same item tree and settings.

To create a separate independent menu, create a new AF attribute and use that as the configuration store for the new symbol.

Asset context

By default, this symbol is not asset context aware, meaning an asset context switch of the display, will not affect the symbols data source. You can however enable that setting in the Save Configuration section, toggle the Follow Display Asset Context to ON.

Troubleshooting and limitations

• Check: If a link opens the wrong context, check its destination, parameters, and synchronization source.
• Check: Operators need permission to access every linked display or external page.