# Perspective Accordion Navigation

**URL:** <https://forum.inductiveautomation.com/t/perspective-accordion-navigation/103143>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [March 3, 2025, 2:07pm UTC](https://forum.inductiveautomation.com/t/perspective-accordion-navigation/103143 "2025-03-03T14:07:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anant\_Upadhyayula](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@Anant\_Upadhyayula](https://forum.inductiveautomation.com/u/Anant_Upadhyayula)\
**Post date:** [March 3, 2025, 2:07pm UTC](https://forum.inductiveautomation.com/t/perspective-accordion-navigation/103143/1 "2025-03-03T14:07:54Z")

</div>

![Dev](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/b/6bfc9228090623396d5d5832839a0a4bce860582.png)  
I used the Accordion and MenuTree to create the navigation it is working as expected as shown in the image.

1. The accordion toggle to different areas.
2. Pick the right subsystem under an area
3. is the landing page.  
However there was one request I could not figure out. the request is when user click on production area. They want to see a system overview page in the landing area.

Accordion header.content.type is set as text, changing it to view messes up the navigation on the left because it starts showing embedded view in the left menu.  
On click on the production area, accordion expansion works great, with the same click is it possible to open a desired overview page in the landing area?  
Thank you for your help

---

<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:** [March 3, 2025, 3:46pm UTC](https://forum.inductiveautomation.com/t/perspective-accordion-navigation/103143/2 "2025-03-03T15:46:52Z")

</div>

To get a target to show for ① I expect that you would specify the target URL in `items.1.target`. If that doesn't work then paste your MenuTree JSON here on the forum. See [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831) and if you can keep the post very tidy by using the Hide Details option.

---

<div class="post-metadata">

**Author:** ![ryan.perretta](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.perretta/32/75110_2.png) [@ryan.perretta](https://forum.inductiveautomation.com/u/ryan.perretta)\
**Post date:** [March 3, 2025, 4:01pm UTC](https://forum.inductiveautomation.com/t/perspective-accordion-navigation/103143/3 "2025-03-03T16:01:25Z")

</div>

@Transistor, I believe the OP is using the Accordion component here, so the `target` property will not exist for them.

If this is the case the accordion has a configurable event `onItemExpanded` that would allow you to configure a `Script` action. In this script I would grab the item index from the `event.index` parameter and add some logic that will navigate the user to the correct page based on the item clicked using the [`system.perspective.navigate`](https://www.docs.inductiveautomation.com/docs/8.1/appendix/scripting-functions/system-perspective/system-perspective-navigate) function.

---

<div class="post-metadata">

**Author:** ![Anant\_Upadhyayula](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@Anant\_Upadhyayula](https://forum.inductiveautomation.com/u/Anant_Upadhyayula)\
**Post date:** [March 3, 2025, 5:26pm UTC](https://forum.inductiveautomation.com/t/perspective-accordion-navigation/103143/4 "2025-03-03T17:26:37Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/d/cd2b0c8e009712907c8b247ca3008d30c3eaa654.png)  
@ryan.perretta I tried this and it appears to work. One thing I did not like I had to add script to individual item.expanded property.  
Is there a better way to achieve this. Read items[i].expanded values and assign landing pages in one place.

1. 
  1. home

2. 
  1. mix

3. 
  1. production

4. 
  1. utilities

5. etc etc,

---

<div class="post-metadata">

**Author:** ![ryan.perretta](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.perretta/32/75110_2.png) [@ryan.perretta](https://forum.inductiveautomation.com/u/ryan.perretta)\
**Post date:** [March 3, 2025, 9:16pm UTC](https://forum.inductiveautomation.com/t/perspective-accordion-navigation/103143/5 "2025-03-03T21:16:25Z")

</div>

Yes.

Right click on the accordion component and click the the `Configure Events` option in that menu.

Then select the event shown below, click the plus icon, and select `Script`. Anything you write in that script will fire whenever an item in that accordion is expanded.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/c/fc1194e4900fdac1f44e31d5f96f0dce5e61f34c.png)

You would still have to hard-code some logic to check which item was expanded in that script (using `event.index` to get the expanded item), but it would allow for a single script to be utilized. You _could_ also name the menu items and views in such a way that you could use the menu item to derive the view path name and ditch the `if`'s.

I would say it makes a bit more sense to simply have an Overview submenu item where needed, as it does not make sense intuitively for the accordion header to perform a navigation. But if this is necessary, that is how I would go about it.

---

<div class="post-metadata">

**Author:** ![Anant\_Upadhyayula](https://avatars.discourse-cdn.com/v4/letter/a/e36b37/32.png) [@Anant\_Upadhyayula](https://forum.inductiveautomation.com/u/Anant_Upadhyayula)\
**Post date:** [March 4, 2025, 7:53pm UTC](https://forum.inductiveautomation.com/t/perspective-accordion-navigation/103143/6 "2025-03-04T19:53:40Z")

</div>

@ryan.perretta,  
Thank you for the suggestion to make it truly dynamic.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/8/882a79bf99bf8e4931a0d08cd4b25edc51ea4a4b.png)

it worked like a charm, all I had to do was make the naming consistent and it worked with one click event.  
I agree that Accordion was to show the areas of the plant and its sub systems. However it is human urge to keep the old functionality as long as possible even after the upgrades
