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.
The Menu Tree component can be configured to allow users to navigate pages in a Perspective Session. The Menu Tree defines a hierarchical view of information that can be configured to expand submenu branches and menu items. The subitems can be further expanded to expose more subitems if any exist, and collapsed to hide subitems.
Each menu item has its own path, for example, "Western Region/CA/San Jose" that determines its location in the Menu Tree. The Separation Character property (by default its forward-slash), dictates how the paths are broken up.
| Name | Description | Property Type |
|---|---|---|
| items | Configure items representing nodes in a subtree from this option. If defined, a submenu will branch from here with these options. | array |
| layoutAlignment | Specifies which side of the root menu is aligned to. Submenu slides in from the opposite side. | value: boolean |
| enabled | If true, this component is currently enabled to perform its actions. | value: boolean |
| itemStyle | Sets style for the menu tree component. You can also specify a style class. | object |
| headerStyle | Sets style for the menu header. You can also specify a style class. | object |
| backActionStyle | Style to display in the root menu. You can also specify a style class. | object |
| backActionText | Text to display in prompt to go back to the root menu. You can also specify a style class. | value: string |
| style | Sets a style for this 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 |
Menu Tree Example 1
You can use links to go to URL links outside your project or internal to your project.
For this example assume you have some screens defined in the project page configuration (home gear). Assume the URL's for those are as follows:
Images on the left side of the Menu Tree are associated with the label.icon.path
Images on the right side of the Menu Tree are associated with the navIcon.path
target property is the link to the screen to navigate to.
| Property | Value |
|---|---|
| props.items.0.navIcon.path | material/trending_flat |
| props.items.0.navIcon.color | #6C6C6C |
| props.items.0.label.text | Menu Numbers |
| props.items.0.label.icon.path | material/list |
| props.items.0.label.showHeader | false |
| props.items.1.navIcon.path | material/trending_flat |
| props.items.1.navIcon.color | #008000 |
| props.items.1.label.text | Menu Letters |
| props.items.1.label.icon.path | material/settings |
| props.items.1.label.showHeader | true |
| props.items.2.navIcon.path | material/stop |
| props.items.2.navIcon.color | #FF8A8A |
| props.items.2.label.text | No Target Link |
| props.items.2.label.icon.path | material/stop_screen_sharing |
| props.items.2.label.showHeader | true |
| Property | Value |
|---|---|
| props.items.0.items.0.target | /screen_1 |
| props.items.0.items.0.navIcon.path | material/cloud |
| props.items.0.items.0.navIcon.color | #00D9D9 |
| props.items.0.items.0.label.text | Item 1 |
| props.items.0.items.0.label.icon.path | material/chat |
| props.items.0.items.0.label.showHeader | true |
| props.items.0.items.1.target | /screen_2 |
| props.items.0.items.1.navIcon.path | material/cloud_queue |
| props.items.0.items.1.label.text | Item 2 |
| props.items.0.items.1.label.showHeader | true |
| props.items.0.items.2.target | /screen_3 |
| props.items.0.items.2.navIcon.path | material/cloud_circle |
| props.items.0.items.2.label.text | Item 3 |
| props.items.0.items.2.label.showHeader | true |
| Property | Value |
|---|---|
| props.items.1.items.0.navIcon.path | material/trending_flat |
| props.items.1.items.0.label.text | Sub Menu A |
| props.items.0.items.0.label.showHeader | true |
| props.items.1.items.1.target | /screen_b |
| props.items.1.items.1.navIcon.path | material/data_usage |
| props.items.1.items.1.label.text | Item B |
| props.items.1.items.0.items.0.target | /screen_a1 |
| props.items.1.items.0.items.0.navIcon.path | material/group |
| props.items.1.items.0.items.0.navIcon.color | #6C6C6C |
| props.items.1.items.0.items.0.label.text | Item A 1 |
| props.items.1.items.0.items.0.label.showHeader | true |
| props.items.1.items.0.items.1.target | /screen_a2 |
| props.items.1.items.0.items.1.navIcon.path | material/group_add |
| props.items.1.items.0.items.1.navIcon.color | #6C6C6C |
| props.items.1.items.0.items.1.label.text | Item A 2 |
| props.items.1.items.0.items.1.label.showHeader | true |
The items property for this component is complex. It is an "object" type that has as many levels as you want. Here is an example of the JSON used to create the two level image above. You can copy the text below and paste it into the items property of your Menu Tree component. No code is needed to make this component navigate.
This example assumes several things in order to work:
[
{
"target": "",
"items": [
{
"target": "/overview",
"items": [],
"navIcon": {
"path": ""
},
"label": {
"text": "Overview",
"icon": {
"path": ""
}
},
"showHeader": true
},
{
"target": "/lines",
"items": [],
"navIcon": {
"path": ""
},
"label": {
"text": "Lines",
"icon": {
"path": ""
}
},
"showHeader": true
},
{
"target": "/packaging",
"items": [],
"navIcon": {
"path": "Packaging"
},
"label": {
"text": "Repeater",
"icon": {
"path": ""
}
},
"showHeader": true
}
],
"navIcon": {
"path": "chevron_right",
"color": "#6C6C6C"
},
"label": {
"text": "HMI",
"icon": {
"path": "menu_list"
}
},
"showHeader": true
},
{
"target": "",
"items": [
{
"target": "/userPermissions",
"items": [],
"navIcon": {
"path": ""
},
"label": {
"text": "Edit Permissions",
"icon": {
"path": ""
}
},
"showHeader": true
},
{
"target": "/userEdit",
"items": [],
"navIcon": {
"path": ""
},
"label": {
"text": "Edit Users",
"icon": {
"path": ""
}
},
"showHeader": true
}
],
"navIcon": {
"path": "chevron_right",
"color": "#6C6C6C"
},
"label": {
"text": "Administration",
"icon": {
"path": "menu_list"
}
},
"showHeader": true
}
]