# Applying styles to disabled menu items in Perspective's Menu Tree component

**URL:** <https://forum.inductiveautomation.com/t/applying-styles-to-disabled-menu-items-in-perspectives-menu-tree-component/97624>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [October 22, 2024, 4:31pm UTC](https://forum.inductiveautomation.com/t/applying-styles-to-disabled-menu-items-in-perspectives-menu-tree-component/97624 "2024-10-22T16:31:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![AGOSTINO\_SCLAUZERO](https://avatars.discourse-cdn.com/v4/letter/a/eada6e/32.png) [@AGOSTINO\_SCLAUZERO](https://forum.inductiveautomation.com/u/AGOSTINO_SCLAUZERO)\
**Post date:** [October 22, 2024, 4:31pm UTC](https://forum.inductiveautomation.com/t/applying-styles-to-disabled-menu-items-in-perspectives-menu-tree-component/97624/1 "2024-10-22T16:31:44Z")

</div>

In the _Menu Tree_ component of Perspective, disabled menu items look identical to the enabled ones.  
I would like to give users a clear visual indication that some options are unavailable.  
To achieve this, I defined a style called "StyleA" with an element state "disabled," which sets the color to red (additionally, I defined an "enabled" state that applies a green color, just as a double check).

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/2/9242614c07c83e97b774fe0128dc801e7724a18d.png)

On the page, I have two text fields—one enabled and one disabled—both using _StyleA_.  
On these two components the style is working perfectly, as you can see below.

I also have a Menu Tree where the _itemStyle_ property is set to _StyleA_.  
Despite the second menu item being disabled, the style does not apply.

Any suggestions?

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

---

<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:** [October 22, 2024, 7:32pm UTC](https://forum.inductiveautomation.com/t/applying-styles-to-disabled-menu-items-in-perspectives-menu-tree-component/97624/2 "2024-10-22T19:32:37Z")

</div>

I just tried it out on my own Designer and got the same results. I tried using the class on the individual item objects and the `itemStyle` property, but neither seemed to work.

It's not as clean of a solution as this would be, but you could add the style rules like a different background color, setting the cursor to `not-allowed`, etc. to the Basic rules of a style class. Then you can dynamically add and remove that class from the individual menu items when needed via property bindings or event scripts.