Component Palette Icon:




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.






NameDescriptionProperty Type
items

Configure items representing the main menu items.


NameDescriptionProperty Type
enabledWhether this option is currently enabled to perform its action or render its submenu.value: 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.

Entering Page paths without the leading "/" will open pages in a new tab. If provided, the action to be taken when clicked. If a page should be shown, an example target would be “/my-page”. If an external web page should be shown, an example target would be “http://www.google.com/”.

value: string
items

Configure items representing child menu items from this option. If defined, a submenu will branch from here with these options.





enabledWhether this option is currently enabled to perform its action or render its submenu.value: boolean
targetA url (external) or mounted path to a page. If "items" is empty (no subtree to this item), this will navigate to that location.value: string
itemsConfigure items representing child menu items from this option. If defined, a submenu will branch from here with these options.array
icon

Icon image appended to the left of the menu item.


NameDescriptionProperty Type
pathShorthand path to icon source, in format: library/IconName. The materials icon library is a the primary source for icons, see https://material.io/resources/icons. value: string
colorColor 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.color



object
labelText to display for this menu item label.value: 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.

object




object



array
enabledIf true, the component is enabled/active. Default is true.value: boolean

itemStyle



Sets 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





The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.






Fired when an item is selected.

  • Object Path

event.enabled

  • Type

Boolean

  • Description

 Whether the item interacted with is enabled.


  • Object Path

event.label

  • Type

String

  • Description

 Text to display for this option.


  • Object Path

event.label

  • Type

List

  • Description

A list containing the item indexes leading to the item that was clicked.


  • Object Path

event.target

  • Type

String

  • Description

A url (external) or a mounted path to a page.






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



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



This example shows a Horizontal Menu with four items. It uses the new style settings enabled in 8.0.5.

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