I am using Horizontal Menu to navigate around different pages in my project, I want to highlight the clicked item on the menu. I tried different ways none seems working.
Thank you
You will need:
- A way to keep track of which item was last clicked (which needs to persist throughout the session and in between page changes)
- A way to alter the ‘style’ property of the horizontal menu item which was clicked.
Here’s one way:
Create a custom session property which you will use to keep track of which item was last clicked. Let’s call it “selectedItemPath” and make it an array, then initialize it to have one item with a value of 0 (which corresponds to the first item of the menu).
Next, on your horizontal menu component, add a script onto the onItemClicked event that will update this session prop to the incoming ‘path’ event value (session.custom.selectedItemPath = event.path).
Lastly, you’ll need a way to update the style property of the item specified by your new session property. You could do this by creating a new custom property on your horizontal menu component, and binding it to selectedItemPath. Then, add a property change script on this new custom property which will take the new value (currentValue.value) and apply it to the corresponding menu item’s style (your menu’s props.items.style.backgroundColor) while removing the highlighting from the previously selected item (which can be accessed with previousValue.value in the property change script).
3 Likes
Thank you
I am new with ignition, so need little more help. I did as you told, created array session variable, added onItemClicked script and created custom property on horizontal menu. Left part i am confused.
If you right click on a property, there’s an option to “Add Change Script…” that adds a ‘property change script’ which will run whenever the value of the property changes.
Within the property change script, you have access to the previousValue and the currentValue of the property as ‘qualified value objects’ (which are objects with a quality, timestamp, and value; we only need the value from these objects and not the other two fields, hence currentValue.value and previousValue.value).
Lastly, if you look at the horizontal menu’s props.items and expand an item, you can see it has a ‘style’ property. If you click on the style customizer button, you can add inline styles to your components. 
By default, the styles are blank. We also need to edit the styles from a script and not by hand. Fortunately, we can access and alter the style like it’s a python dictionary, so we’ll need to add a key:value pair with a key named “backgroundColor” and a value with a string containing the color you want to highlight the menu item with.
So, our goal for the property change script is to take the selectedItemPath property and then alter the ‘style’ of the corresponding item to highlight it. After we do this, we also want to make sure we remove the highlight of the previously selected item.
Here’s code for the property change script to speed you along (though note this only highlights/unhighlights top level items; highlighting subitems is left as an exercise to the reader 
).
# Ensure that the new value (which is a list of indexes) is not empty
if len(currentValue.value) > 0:
# grab index out of the list for top-level item
itemIndex = currentValue.value[0]
# highlight the corresponding menu item's style
self.props.items[itemIndex]["style"]["backgroundColor"] = "#FFFF8A"
# now, do similar logic for unhighlighting
if len(previousValue.value) > 0:
itemIndex = previousValue.value[0]
self.props.items[itemIndex]["style"]["backgroundColor"] = ""
2 Likes
Thank you so much for the reply, I am getting an error when I trying to bind newly created custom property to session
That’s not an error, that’s just an output preview from the binding. If that was an error, it would be in red rather than in blue, and you’d be able to mouse over the red error message to get details. 
1 Like
Sorry to disturb you again, its not working
I am attaching screenshots of what i am doing with this:
Created session variable
Script on horizontal menu onItemClick
Created custom property
EventChange script
background color property
Somewhere i am making mistake
If you can look into this it will really helpful
Thank You
The property change script needs to go on your new ‘menu’ custom property, not on the style property. Sorry for the confusion.
Hey kristen, Hope you are doing good. I have implemented the same approach for Navigation menutree.
I have implemented the below change script. In menutree, we have Itemstyle props, in that I have crated the backgroundcolor props,
But when I click any item first, complete itemstyle going to black.
This is initial,
Need your input. kindly help
Don't do this. session.custom is not the place to stored these things.
Each page has a primaryView property that will tell you what view is currently displaying. Use this instead.
I'm not a huge fan of the built-in menus, but I'm using one right now for a prototype.
Put this expression binding on the style.classes property of the items that should be highlighted:
if ({page.props.primaryView} = "The path of the view the item targets",
"the class to apply when it's selected",
""
)
1 Like
Thank you for your reply. I will check