---
title: "Navigating with the Horizontal Menu Component"
---

# Navigating with the Horizontal Menu Component

> The Horizontal Menu component enables you to build a menu structure by setting up multiple links to different page URLs from the component. Our example has a menu with links to three internal pages and one external page on the Internet.

This example shows a Horizontal Menu with four items. Three items are linked to views within the Perspective project and the fourth is linked to a website. The third item in the list, Field Offices, has four subitems. 

![](2020-07-20_15-32-49.png)

## Initial Project Setup 
To begin with we have created three views: **WestView**, **EastView**, and **Welcome**. They are each coordinate type views. As we create each new view, we checked the Page URL property and added a page name. 

|View Name | Page URL|
|--|--|
|WestView	|/west_page|
|EastView	|/east_page|
|Welcome	|/|

![](2019-12-20_12-55-34.png)

On Page Configuration, you'll note that each page is already set up with a Primary view. 

![](2019-12-20_15-33-59.png)

Now we're ready to start building the navigation.

## Set Up a Header View
The first thing we'll set up is a view that will hold the Horizontal Menu component. We'll use this view as a header for our pages within this project. 

1. In the Project Browser, right click on Views and select the **NewFolder** ![](2019-12-09_11-21-14.png) option. Name the folder "Header".
2. Right click on the Header folder and select the **NewView** ![](2019-12-09_11-21-03.png) option. 

    * Name: **Horizontal-Menu-Nav**
    * Layout: **Coordinate**
    * Page URL: unchecked

        ![](2019-12-18_16-30-02.png)

3. Click **Create View**. 
4. In the Property Editor for the view, set the **defaultSize** property as follows:

    * width: **800**
    * height: **50**

5. Drag a Horizontal Menu component onto the view.
6. In the Property Editor, set the Position Properties as follows: 

    |Property| Value|
    |--|--|
    |position.x|	15|
    |position.y	|10|
    |position.width	|550|
    |position.height	|30|

7. In the Property Editor, scroll down to style and click the **ModifyStyle** ![](<styles-config small-24.png>) icon.
    1. Expand the Text section and set the style options as follows:

        |Property| Value|
        |--|--|
        |props.style.fontWeight|	bolder|
        |props.style.fontFamily	|Verdana|
        |props.style.fontSize|	14px|

    1. Expand the Border section and set the style options as follows:

        |Property| Value|
        |--|--|
        |props.style.borderStyle	|solid|
        |props.style.borderColor	|#555555|
        |props.style.borderRadius	|16px|
        |All Corners	|(selected)|
  
    Your Designer will look like this at this point: 

    ![](2020-07-20_14-04-53.png)

8. Open Page Configuration by clicking on the **Settings** ![](<settings small-24.png>) icon at the bottom left of the Designer window.
9. Under Page Configuration, click on **Shared Settings**.
10. In the header part of the page mockup, click on the **Add** ![](<add small_18.png>) icon. 
11. Select the Horizontal-Menu-Nav view from the dropdown.

    ![](2020-07-20_14-33-35.png)

12. Click **OK**. The Horizontal-Menu-Nav view will now appear at the top of all pages in the project. 

## Configure the Tabs in the Horizontal Menu
Now let's set the properties for each of the four tabs in the Horizontal Menu. Each tab will have a display a name and an icon and will have a target page or website to open when clicked.  

1. In the Property Editor, expand the items property and set the following for item 0: 

    |Property| Value|
    |--|--|
    |props.items.0.enabled|	true|
    |props.items.0.target|	/west_page|
    |props.items.0.icon.path|	material/explore|
    |props.items.0.icon.color|	#D97700|
    |props.items.0.label|	West Site|

    The Property Editor will look like this:

    ![](2020-01-03_16-01-37.png)

2. In the Property Editor, set the following for item 1: 

    |Property| Value|
    |--|--|
    |props.items.1.enabled|	true|
    |props.items.1.target	|/east_page|
    |props.items.1.icon|	material/store|
    |props.items.1.color	|    #D97700|
    |props.items.1.label|	East Site|

3. In the Property Editor, set the following for item 2: 
    :::note
    Do not set a props.items.2.target property value for this tab because we will set up dropdown tabs in the next section.
    :::

    |Property| Value|
    |--|--|
    |props.items.2.enabled|	true|
    |props.items.2.icon.path	|material/landscape|
    |props.items.2.icon.color|    #D97700|
    |props.items.2.label|	Field Offices|

4. In the Property Editor, set the following for item 3: 
    :::note
    This tab uses a website as its target, therefore it does not need to target a page within Perspective.
    :::

    |Property| Value|
    |--|--|
    |props.items.3.enabled|	true|
    |props.items.3.target	|http://inductiveautomation.com/about/|
    |props.items.3.icon.path|	material/people|
    |props.items.3.icon.color|#D97700|
    |props.items.3.label	|About|

### Configure the Field Offices Tab in the Horizontal Menu
The third tab in the Horizontal Menu is titled "Field Offices." Instead of navigating to one page, this tab has a dropdown menu with four options on it: Reservoir, Dock, Warehouse, and Surveillance.

1. To start, we created a new folder in Views called **Field**. 

    ![](2020-01-03_16-28-16.png)

2. Within the Field folder, we create four views: **Reservoir**, **Dock**, **Warehouse**, and **Surveillance**. Make them Coordinate types and set up a page URL for each.  

    |View Name|Page URL|
    |--|--|
    |Reservoir|/reservoir_page|
    |Dock	|/dock_page|
    |Warehouse|	/warehouse_page|
    |Surveillance|	/surveillance_page|

3. Open the Horizontal-Menu-Nav view and select the Horizontal Menu component.

4. In the Property Editor, expand the properties for Item 2. 

    ![](2019-12-20_15-47-11.png)

5. Select the props.items.2.items property.
6. Click the Add ![](2020-07-20_15-23-59.png) icon to add four items.
7. Set the properties for Item 0 as follows:

    |Property| Value|
    |--|--|
    |props.items.2.items.0.enabled|	true|
    |props.items.2.items.0.target	|/reservoir_page|
    |props.items.2.items.0.icon.path|	material/rowing|
    |props.items.2.items.0.icon.color|	#00ACAC|
    |props.items.2.items.0.label	|Reservoir|

    The Property Editor will look like this: 

    ![](2020-01-03_16-35-22.png)

8. Now we'll do the same for the other three items. Set the properties for Item 1 as follows:

    |Property| Value|
    |--|--|
    |props.items.2.items.1.enabled|	true|
    |props.items.2.items.1.target|	/dock_page|
    |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|

9. Set the properties for Item 2 as follows:

    |Property| Value|
    |--|--|
    |props.items.2.items.2.enabled	|true|
    |props.items.2.items.2.target|	/warehouse_page|
    |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|

10. Set the properties for item 3 as follows: 

    |Property| Value|
    |--|--|
    |props.items.2.items.3.enabled|	true|
    |props.items.2.items.3.target|	/surveillance_page|
    |props.items.2.items.3.icon.path|	material/videocam|
    |props.items.2.items.3.icon.color|	#AAAAAA|
    |props.items.2.items.3.label	|Surveillance|

11. Save your project. 
12. Click **Tools** > **Launch Perspective** > **Launch Session**. 
13. Click on the tabs in the header to view different pages. For our example, we have put a few components on each view. Here is an example of what the Field Offices > Reservoir page might look like: 

    ![](2020-07-20_15-39-40.png)