Ignition 8.1
Ignition 7.9
Ignition 7.8
Sepasoft - MES Modules
Cirrus Link - MQTT Modules
Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples
You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.
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.
| Name | Description | Property Type |
|---|---|---|
| items | Configure items representing the main menu items. | array |
| enabled | If true, the component is enabled/active. Default is true. | value: boolean |
itemStyle |
The following feature is new in Ignition version 8.0.5
Click here to check out the other new features 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 |
| style | Sets 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 |
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://fonts.google.com/icons?selected=Material+Icons.
| Property | Value |
|---|---|
| props.items.0.enabled | true |
| props.items.0.target | https:// (link to Acme home) |
| props.items.0.icon.path | material/home |
| props.items.0.icon.color | #FF0000 |
| props.items.0.label | Acme Inc. |
| props.items.1.enabled | true |
| props.items.1.target | https:// (link to products) |
| props.items.1.icon | material/flare |
| props.items.1.color | #D97700 |
| props.items.1.label | Products |
| props.items.2.enabled | true |
| props.items.2.target | https:// (link to forum) |
| props.items.2.icon.path | material/forum |
| props.items.2.icon.color | #800080 |
| props.items.2.label | User Forum |
| props.items.3.enabled | true |
| props.items.3.target | https:// (link to help) |
| props.items.3.icon.path | material/help |
| props.items.3.icon.color | #00AC00 |
| props.items.3.label | Help |
| props.style.borderStyle | solid |
| props.style.color | #FF4747 |
| props.style.fontSize | 18px |
| props.style.fontWeight | bold |
| props.style.borderWidth | 1pc |
| props.style.borderColor | #FFCCCC |
| Property | Value |
|---|---|
| props.items.0.items.0.target | https:// (link to about) |
| props.items.0.items.0.icon.path | material/info |
| props.items.0.items.0.icon.color | #FF0000 |
| props.items.0.items.0.label | About Us |
| props.items.0.items.0.target | /screen_2 |
| props.items.0.items.0.enabled | true |
| props.items.0.items.1.target | https:// (link to about) |
| props.items.0.items.1.icon.path | material/local_see |
| props.items.0.items.1.icon.color | #FF0000 |
| props.items.0.items.1.label | Map |
| props.items.0.items.1.target | https:// (link to map) |
| props.items.0.items.1.enabled | true |
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://fonts.google.com/icons?selected=Material+Icons.
Top Level Properties
| Property | Value |
|---|---|
| props.items.0.enabled | true |
| props.items.0.target | /west |
| props.items.0.icon.path | material/explore |
| props.items.0.icon.color | #D97700 |
| props.items.0.label | West Site |
| props.items.1.enabled | true |
| props.items.1.target | /View_East |
| props.items.1.icon | material/store |
| props.items.1.color | #D97700 |
| props.items.1.label | East Site |
| props.items.2.enabled | true |
| props.items.2.icon.path | material/landscape |
| props.items.2.icon.color | #800080 |
| props.items.2.label | Field Offices |
| props.items.3.enabled | true |
| props.items.3.target | /satellite |
| props.items.3.icon.path | material/satellite |
| props.items.3.icon.color | #00AC00 |
| props.items.3.label | Overseas |
| props.style.borderStyle | solid |
| props.style.fontStyle | normal |
| props.style.fontVariant | small-caps |
| props.style.borderRadius | 16 |
| props.style.borderColor | #555555 |
| Property | Value |
|---|---|
| props.items.2.items.0.enabled | true |
| props.items.2.items.0.target | /reservoir |
| props.items.2.items.0.icon.path | material/rowing |
| props.items.2.items.0.icon.color | #00ACAC |
| props.items.2.items.0.label | Reservoir |
| props.items.2.items.1.enabled | true |
| props.items.2.items.1.target | /dock |
| props.items.2.items.1.icon.path | material/directions_boat |
| props.items.2.items.1.icon.color | #9E6635 |
| props.items.2.items.1.label | Dock |
| props.items.2.items.2.enabled | true |
| props.items.2.items.2.target | /warehouse |
| props.items.2.items.2.icon.path | material/local_shipping |
| props.items.2.items.2.icon.color | #0000AC |
| props.items.2.items.2.label | Warehouse |
| props.items.2.items.2.enabled | true |
| props.items.2.items.2.target | /surveillance |
| props.items.2.items.2.icon.path | material/videocam |
| props.items.2.items.2.icon.color | #AAAAAA |
| props.items.2.items.2.label | Warehouse |
This example shows a Horizontal Menu with four items. It uses the new style settings enabled in 8.0.5.
Top Level Properties
| Property | Value |
|---|---|
| props.items.0.enabled | true |
| props.items.0.icon.path | material/sentiment_very_satisfied |
| props.items.0.icon.color | #D97700 |
| props.items.0.label | Comedy |
| props.items.1.enabled | true |
| props.items.1.icon | material/star |
| props.items.1.label | Drama |
| props.items.2.enabled | true |
| props.items.2.icon.path | material/whatshot |
| props.items.2.label | New Release |
| props.items.3.enabled | true |
| props.items.3.icon.path | material/event_seat |
| props.items.3.label | Home |
| props.items.3.style.backgroundColor | #CCFFFF |
| props.itemStyle.backgroundColor | #FFFF00 |
| props.itemStyle.borderStyle | dashed |
| props.style.borderStyle | solid |
| props.style.borderWidth | 6px |
| props.style.borderColor | #000000 |