# Perspective Tree Component - Navigation example

**URL:** <https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 21, 2023, 10:50am UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801 "2023-10-21T10:50:32Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [October 21, 2023, 8:14pm UTC](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801/2 "2023-10-21T20:14:02Z")

</div>

Here's part of one I created.

> **props.items**
>
> ```auto
> [
> {
> "label": "Home",
> "expanded": true,
> "data": {
> "url": "/"
> },
> "items": []
> },
> {
> "label": "Features",
> "expanded": true,
> "data": {
> "url": "/help"
> },
> "items": []
> },
> {
> "label": "Performance",
> "expanded": true,
> "data": {
> "url": "/myDashboard"
> },
> "items": [
> {
> "label": "MyMachines",
> "expanded": true,
> "data": {
> "url": "/areaChart/MyMachine 1P"
> },
> "items": [
> {
> "label": "Mach03",
> "expanded": true,
> "data": {
> "url": "/machine/Mach03"
> },
> "items": []
> },
> {
> "label": "Mach04",
> "expanded": true,
> "data": {
> "url": "/machine/Mach04"
> },
> "items": []
> },
> {
> "label": "Mach05",
> "expanded": true,
> "data": {
> "url": "/machine/Mach05"
> },
> "items": []
> },
> {
> "label": "Mach06",
> "expanded": true,
> "data": {
> "url": "/machine/Mach06"
> },
> "items": []
> },
> {
> "label": "Mach07",
> "expanded": true,
> "data": {
> "url": "/machine/Mach07"
> },
> "items": []
> },
> {
> "label": "Mach08",
> "expanded": true,
> "data": {
> "url": "/machine/Mach08"
> },
> "items": []
> }
> ]
> }
> ]
> }
> ]
> 
> ```

![Tree as menu](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/7/d793ab3fa0f4e70181306996f690ebc330ed10f6.png)

Configure an event on the tree, set it to onItemClicked, select a script action and add the following code.

```auto
	import urllib
	pagePath = self.props.selectionData[0].value.url
	system.perspective.navigate(urllib.quote(pagePath))

```

You'll need to set up each URL on the Page Configuration dialog.

It works really well and makes a nice, clear, easily understood navigation system for an application or site.

---

_[View the full topic](https://forum.inductiveautomation.com/t/perspective-tree-component-navigation-example/80801)._