---
title: "Perspective - Horizontal Menu"
description: "The Horizontal Menu component enables you to build a menu structure by setting up multiple links to different page URLs from the component."
---

# Perspective - Horizontal Menu

> The Horizontal Menu component enables you to build a menu structure by setting up multiple links to different page URLs from the component.

![](2019-07-03_11-27-12.png)

**Component Palette Icon**:  

![](2019-07-03_11-32-12.png)

## 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](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 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](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx).**label**: Text to display for this menu item label. Value is string.**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). |
| enabled   | If 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](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         |
| style     | Sets a style for the entire 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         |

## Scripting
See the [Perspective - Horizontal Menu Scripting](perspective-horizontal-menu-scripting/perspective-horizontal-menu-scripting.md) 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](navigating-with-the-horizontal-menu-component/navigating-with-the-horizontal-menu-component.md) 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/.

![](2019-07-05_13-55-43.png)

**Top Level Properties**

| 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://](https://acme12345/) (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://](https://acme12345/) (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                                        |

**Sub Level Properties of Item 0**

| Property                         | Value                                              |
| -------------------------------- | -------------------------------------------------- |
| props.items.0.items.0.target     | [https://](https://acme12345/) (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://](https://acme12345/) (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://](https://acme12345/) (link to map)       |
| props.items.0.items.1.enabled    | true                                               |

### 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/.

![](2019-07-05_16-39-08.png)

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

**Sub Level Properties of Item 2**

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

### Example 3
This example shows a Horizontal Menu with four items.

![](2019-10-01_15-25-48.png)

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