Skip to main content
Version: 8.3

Perspective - Horizontal Menu

Component Palette Icon:

Description

Horizontal Menu component enables you to build a menu structure by setting up multiple links to different page URLs from the component. The Horizontal Menu occupies a large amount of horizontal space and a comparatively small amount of vertical space. The menu starts with a list of root-level menu items that make up the main display area of the component.

If you have more menu items than will fit the width of the component, arrow buttons appear to enable you to scroll left and right through all menu items. The control can also be disabled as a whole.

Each menu item can be configured with a target that will serve as either a link to a page that should be shown (e.g. “/my-page”), or a link to an external web page (e.g. “http://www.inductiveautomation.com/”). They can also be given a list of child menu items that will show temporarily in a popup as the user is interacting with them. Additionally, menu items can be labeled, disabled, and be given an icon to show to the left of their label.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
itemsConfigure items representing the main menu items.
  • enabled: Whether this option is currently enabled to perform its action or render its submenu. Value is boolean.
  • target: A URL (http://www.inductiveautomation.com/) or mounted path to a page (/my-page). If "items" is empty (no subtree to this item), this will navigate to that location. Value is string.
  • items: Configure items representing child menu items from this option. If defined, a submenu will branch from here with these options.
    • enabled: Whether this option is currently enabled to perform its action or render its submenu. Value is boolean.
    • target: A URL (external) or mounted path to a page. If "items" is empty (no subtree to this item), this will navigate to that location. Value is string.
    • items: Configure items representing child menu items from this option. If defined, a submenu will branch from here with these options. Value is array.
    • icon: Icon image appended to the left of the menu item, with two child properties: path and color. The path property creates a shorthand path to icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://fonts.google.com/icons?selected=Material+Icons. Value is string. The color property sets the color of the icon. Can also assign the "fill" property in styles. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.
    • label: Text to display for this menu item label. Value is string.
    • style: Sets a style for this item. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
enabledIf true, the component is enabled/active. Default is true.value: boolean
itemStyleSets a style for all the items in the component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
styleSets a style for the entire component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

Scripting

See the Perspective - Horizontal Menu Scripting page for the full list of scripting functions available for this component.

Examples

In addition to the examples below, learn more about the Horizontal Menu component on the Navigating with the Horizontal Menu Component page.

Example 1

This example shows a Horizontal Menu with four items. The first item also has two subitems. Each item links to a webpage. Icons are taken from the Material Design icons that can be found here: https://material.io/tools/icons/.

Top Level Properties

PropertyValue
props.items.0.enabledtrue
props.items.0.targethttps:// (link to Acme home)
props.items.0.icon.pathmaterial/home
props.items.0.icon.color#FF0000
props.items.0.labelAcme Inc.
props.items.1.enabledtrue
props.items.1.targethttps:// (link to products)
props.items.1.iconmaterial/flare
props.items.1.color#D97700
props.items.1.labelProducts
props.items.2.enabledtrue
props.items.2.targethttps:// (link to forum)
props.items.2.icon.pathmaterial/forum
props.items.2.icon.color#800080
props.items.2.labelUser Forum
props.items.3.enabledtrue
props.items.3.targethttps:// (link to help)
props.items.3.icon.pathmaterial/help
props.items.3.icon.color#00AC00
props.items.3.labelHelp
props.style.borderStylesolid
props.style.color#FF4747
props.style.fontSize18px
props.style.fontWeightbold
props.style.borderWidth1pc
props.style.borderColor#FFCCCC

Sub Level Properties of Item 0

PropertyValue
props.items.0.items.0.targethttps:// (link to about)
props.items.0.items.0.icon.pathmaterial/info
props.items.0.items.0.icon.color#FF0000
props.items.0.items.0.labelAbout Us
props.items.0.items.0.target/screen_2
props.items.0.items.0.enabledtrue
props.items.0.items.1.targethttps:// (link to about)
props.items.0.items.1.icon.pathmaterial/local_see
props.items.0.items.1.icon.color#FF0000
props.items.0.items.1.labelMap
props.items.0.items.1.targethttps:// (link to map)
props.items.0.items.1.enabledtrue

Example 2

This example shows a Horizontal Menu with four items that are linked to views within the Perspective project. The third item in the list, Field Offices, has four subitems. Each item links to a view for a different field office. Icons are taken from the Material Design icons that can be found here: https://material.io/tools/icons/.

Top Level Properties

PropertyValue
props.items.0.enabledtrue
props.items.0.target/west
props.items.0.icon.pathmaterial/explore
props.items.0.icon.color#D97700
props.items.0.labelWest Site
props.items.1.enabledtrue
props.items.1.target/View_East
props.items.1.iconmaterial/store
props.items.1.color#D97700
props.items.1.labelEast Site
props.items.2.enabledtrue
props.items.2.icon.pathmaterial/landscape
props.items.2.icon.color#800080
props.items.2.labelField Offices
props.items.3.enabledtrue
props.items.3.target/satellite
props.items.3.icon.pathmaterial/satellite
props.items.3.icon.color#00AC00
props.items.3.labelOverseas
props.style.borderStylesolid
props.style.fontStylenormal
props.style.fontVariantsmall-caps
props.style.borderRadius16
props.style.borderColor#555555

Sub Level Properties of Item 2

PropertyValue
props.items.2.items.0.enabledtrue
props.items.2.items.0.target/reservoir
props.items.2.items.0.icon.pathmaterial/rowing
props.items.2.items.0.icon.color#00ACAC
props.items.2.items.0.labelReservoir
props.items.2.items.1.enabledtrue
props.items.2.items.1.target/dock
props.items.2.items.1.icon.pathmaterial/directions_boat
props.items.2.items.1.icon.color#9E6635
props.items.2.items.1.labelDock
props.items.2.items.2.enabledtrue
props.items.2.items.2.target/warehouse
props.items.2.items.2.icon.pathmaterial/local_shipping
props.items.2.items.2.icon.color#0000AC
props.items.2.items.2.labelWarehouse
props.items.2.items.2.enabledtrue
props.items.2.items.2.target/surveillance
props.items.2.items.2.icon.pathmaterial/videocam
props.items.2.items.2.icon.color#AAAAAA
props.items.2.items.2.labelWarehouse

Example 3

This example shows a Horizontal Menu with four items.

Top Level Properties

PropertyValue
props.items.0.enabledtrue
props.items.0.icon.pathmaterial/sentiment_very_satisfied
props.items.0.icon.color#D97700
props.items.0.labelComedy
props.items.1.enabledtrue
props.items.1.iconmaterial/star
props.items.1.labelDrama
props.items.2.enabledtrue
props.items.2.icon.pathmaterial/whatshot
props.items.2.labelNew Release
props.items.3.enabledtrue
props.items.3.icon.pathmaterial/event_seat
props.items.3.labelHome
props.items.3.style.backgroundColor#CCFFFF
props.itemStyle.backgroundColor#FFFF00
props.itemStyle.borderStyledashed
props.style.borderStylesolid
props.style.borderWidth6px
props.style.borderColor#000000