Basic Page Navigation
Before we get into fancier strategies, it's worth noting that we can use Button components (or any other components or containers you want users to click) to easily navigate from one page to another.You can use buttons on each main view, or create a docked view with buttons for each your main pages. This is one of the simplest ways to do navigation and will help you get a project started very quickly.
Let's walk through a quick example of how to make a button navigate when clicked:
- For a more consistent and hassle-free project, configure a docked view for your buttons. See Configure a Docked View above for a walkthrough.
- Drag a Button component onto the container.
- Right-click on the component and select Configure Events....

- Expand Mouse Events. As you can see, Perspective provides a multitude of ways to interact with your component. Select onClick.

- Click the Add
icon to add a new action to the event. Select an action you'd like to use for the navigation. See the Navigation Actions section above for details about each action.

- Repeat Steps 2 through 5 for each new Button that you want.
Tab Container and Menu Component
A Tab Strip or Menu is an effective upgrade to the basic button navigation strategy, particularly when you want an indicator that shows which page is selected.
There's a caveat to this approach, however; the tab container offered in Perspective cycles between views, not pages. This means that, if you'd like to organize your project into pages (and you probably should), the tab layout doesn't quite do what we need in terms of tabbed top-level navigation. There are of course other options, from using a row of buttons to using a Flex Repeater with a "tab" view.
The following feature is new in Ignition version
8.0.3
Click here to check out the other new features
The
Horizontal Menu component enables you to build a menu structure by setting up multiple links to different page URLs from the component. An example is provided in
Common Tasks in Perspective.
Navigation Tree
If you're looking for a pre-configured navigation option that is sleek and customizeable, the Menu Tree component allows you to create a menu that has expandable sections with buttons that users can click through. The Menu Tree works best inside a docked view (see Configuring a Docked View above), or, if you're feeling fancy, within a Navigation Drawer.
Only one property on a menu tree, the items property, controls the structure of the tree, all others control its look and feel. The items property can become fairly complex, but fundamentally each element in items has five sub-properties:
- target is where clicking on the item in the menu should take you. It can be a page URL, or an external (non-project) URL.
- items provides an opportunity to show another menu (instead of navigating) when this option in the menu is clicked. A one-menu configuration will ignore this sub-property.
- navIcon and label control the content of the menu item.
- showHeader controls what is at the top of a submenu when it is shown.
In a simple menu, you have a list of pages you'd like to navigate to, and you want them displayed in a column. The Menu Tree component can accommodate this without much fuss.
- Drag the Menu Tree component into the view you'd like to use. Again, using a docked view is probably the best approach.
- Click on the menu tree. We'll be walking through its properties in the Property Editor.
- The items property on our menu tree will contain an entry for each page we'd like to navigate to. We won't walk through configuring those pages; here we'll just use the page URLs /, /Page2, and /Page3.
- The default menu tree has two entries, add a third one by right clicking on 0 or 1 (not items).
- Configure the target properties on the three entries to point to the appropriate page URLs.
- Configure the label property on each entry to show desired text.
- You can customize the icon accompanying the label by changing the icon property (not to be confused with navIcon).
- You can also delete the icon property if you'd prefer not to have one.
- The navIcon property can be customized or removed. It controls the right-most icon in the menu item.
Here's how the final items structure should look. We deleted unnecessary properties for clarity.

Here's our new menu tree:
