# Menu tree item highlight after selection on click

**URL:** <https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [May 3, 2024, 3:43am UTC](https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866 "2024-05-03T03:43:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![SHuidrom](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@SHuidrom](https://forum.inductiveautomation.com/u/SHuidrom)\
**Post date:** [May 3, 2024, 3:43am UTC](https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866/1 "2024-05-03T03:43:10Z")

</div>

I am using "menu tree" component in perspective session for navigating between different graphics.  
I am trying to find an option to "highlight" a particular menu item in the session after a menu item has been selected/clicked to launch?

Thanks.

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [May 3, 2024, 6:12pm UTC](https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866/2 "2024-05-03T18:12:09Z")

</div>

This may become cumbersome depending on the amount of items in your menu but you could put an expression binding on the style class for each item that checks against a list of the 'selected' items.

The binding would return either no class (unselected) or a highlight class (selected).

---

<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:** [May 3, 2024, 6:19pm UTC](https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866/3 "2024-05-03T18:19:31Z")

</div>

> [@SHuidrom](#):
>
> I am trying to find an option to "highlight" a particular menu item in the session

This would normally be automatic if you have the Menu Tree component in a side or top dock.

Are you, by any chance, repeating the menu tree in each **view**? (They're not called "graphics"). That wouldn't be a sensible way to use it.

---

<div class="post-metadata">

**Author:** ![SHuidrom](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@SHuidrom](https://forum.inductiveautomation.com/u/SHuidrom)\
**Post date:** [May 10, 2024, 2:25am UTC](https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866/4 "2024-05-10T02:25:56Z")

</div>

> [@Transistor](#):
>
> This would normally be automatic if you have the Menu Tree component in a side or top dock.

No, it does not highlight automatically even if it's in the side or top dock.

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 10, 2024, 4:39am UTC](https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866/5 "2024-05-10T04:39:53Z")

</div>

Are you looking to highlight the selected item as long as the corresponding view or page remains visible and the user is actively using it?  
eg. below  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/f/5f6a35873e4a7a45b29037d497685a5b8a0a1e07.png)

---

<div class="post-metadata">

**Author:** ![SHuidrom](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@SHuidrom](https://forum.inductiveautomation.com/u/SHuidrom)\
**Post date:** [May 10, 2024, 6:12am UTC](https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866/6 "2024-05-10T06:12:49Z")

</div>

I have resolved it by the following steps-

1. Created Custom properties:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8dfbb0b550de0a243b2738a9a0aaa70090829b4.png)

2. "Configure Events" \> Scripts on Menu tree:  

3. go to style class of the item that needs to be highlighted and bind with custom property with selectedTab. Add expression transform to select the style class:

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

repeat for all the menu items.

---

<div class="post-metadata">

**Author:** ![Ujwal\_Wankhede](https://avatars.discourse-cdn.com/v4/letter/u/4af34b/32.png) [@Ujwal\_Wankhede](https://forum.inductiveautomation.com/u/Ujwal_Wankhede)\
**Post date:** [May 10, 2024, 7:09am UTC](https://forum.inductiveautomation.com/t/menu-tree-item-highlight-after-selection-on-click/89866/7 "2024-05-10T07:09:48Z")

</div>

Fantastic!  
Here is the script and style reference that works for me. The length of the menu tree can vary dynamically. If you prefer not to manually create a Map transform binding for each item, this solution could be quite helpful.

> **MenuTree\>onItemClicked**
>
> ```python
> def runAction(self, event):
> def clear_Style(items):
> # remove the style
> for node in items:
> node["style"] = {"classes":""}
> if len(node["items"]) > 0:
> clear_Style(node["items"])
> 				
> items = self.props.items
> path = event.path
> clear_Style(items)
> for node in path[:-1]:
> items = items[node]["items"]
> 	
> items[path[-1]]["style"] = {"classes":"menu_selected"}
> 
> ```

> **stylesheet.css**
>
> ```python
> .psc-menu_selected{
> background-color: var(--info);
> }
> 
> ```