---
title: "Perspective - Menu Tree"
description: "The Menu Tree component can be configured to allow users to navigate pages in a Perspective Session."
---

# Perspective - Menu Tree

> The Menu Tree component can be configured to allow users to navigate pages in a Perspective Session.

![](2018-12-12_16-51-51.png)

**Component Palette Icon**:  

![](2019-07-11_15-26-20.png)

## Description

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.

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| 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. Click to see the [items](#items-properties) properties.     | 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 options](appendix/reference-pages/style-reference.md) for the menu tree component. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).        | object         |
| headerStyle     | Sets [style options](appendix/reference-pages/style-reference.md) for the menu tree component. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).  | object         |
| backActionStyle | Sets [style options](appendix/reference-pages/style-reference.md) for the menu tree component. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).  | object         |
| backActionText  | Text to display in prompt to go back to the root menu. You can also specify a [style class](https://docs.inductiveautomation.com/display/DOC81/Style+Classes). | value: string  |
| style           | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |

### items Properties

| Name           | Description     | Property Type  |
| -------------- | ---------------- | -------------- |
| 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: string  |
| items          | Configure items representing nodes in a subtree from this option. If defined, a submenu will branch from here with these options.     | array          |
| navIcon        | Icon image appended to the right of the menu item. **path**: 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.**color**: 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](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx).| object |
| label   | Menu item label.**text**: Text to display for this option. Value is string.**icon**: Image icon added to the right of the label text.**path**: 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.| object         |
| visible        | Whether this option should be displayed in the menu tree. | value: boolean |
| enabled        | If true, this option is currently enabled to perform its action or render its submenu.   | value: boolean |
| showHeader     | Whether to display this option's text as a header/title for its submenu.    | value: boolean |
| style          | Sets a style for this item. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |
| resetOnClick   |  While true, clicking on the item will cause the Menu Tree to reset back to its root level. Useful in cases where you want to provide your users with a quick way to return to the start of the menus.  | value: boolean |
| backActionText |  Text to display in prompt to go back to the previous menu. This configuration property will override the text set to display in the root backActionText property. If left blank, menu items default to the root backActionText. |  value: string |

## Scripting
See the [Perspective - Menu Tree Scripting](perspective-menu-tree-scripting.md) page for the full list of scripting functions available for this component.

## Examples
### Example 1 - Basic Menu Tree

![](2019-09-20_15-49-47.png)

![](2019-09-20_15-51-25.png)

![](2019-09-20_15-58-15.png)

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:

* /screen_1
* /screen_2
* /screen_3
* /screen_b
* /screen_a1
* /screen_a2

:::note
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.
:::

**Top Level Properties**

| 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                         |

**Sub Level Properties of Item 0**

| 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                  |

**Sublevel Properties of Item 1**

| 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                   |

### Example 2 - Tree Navigation

![](20181221_121800.png)

![](20181221_121802.png)

![](20181221_121801.png)

![](20181221_121803.png)

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 fields that are blank (HMI and Administration) do not navigate when clicked.
* There are several pages created in the project:
    * /overview
    * /lines
    * /packaging
    * /userPermissions
    * /userEdit
* There are icons stored in ignition.
    * A hamburger menu icon with a path of "menu_list"
    * A greater than symbol with a path of "chevron_right"

```python title="items Property"
[
  {
    "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
  }
]
```