# Style to currently selected page in navigation menu **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [October 3, 2022, 9:41pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778 "2022-10-03T21:41:47Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [October 3, 2022, 9:41pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/1 "2022-10-03T21:41:47Z")
I am not sure this is possible, but I figured I would ask in public so anyone else could answer, but my guess is that if anyone knows it will be @victordcq lol Is it possible to create a style that bases itself off of the current URL in some way? I know through some googling there used to be an `@document` selector in CSS that would enable you to make style classes based off the document title. However it doesn't seem that's still there anymore. I am trying to automatically apply a style class to a menu item if you are on its target page. A few other solutions that don't solve the problem today, but could in the longer term: 1. A binding on the page url, that climbs the menu trees items and updates it that way, but that feels like a hacky workaround not a clean solution. 2. A feature request to add something like an "on target" style property to each menu item I appreciate any ideas! ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [October 3, 2022, 10:05pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/2 "2022-10-03T22:05:39Z")
Incase there isn't a clean CSS solution (which would be ideal), here is a solution #1 Done on a custom property on the menu itself: ### Expression Structure Binding: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b741501b9cdfdbe2adb439e39286b2b0afc2f092.png) ### The code on the transform: ```python def searchChildItems(item): containsTarget = False if item.get('target') == value.pagePath: item['style']["classes"] = "mySelectedPageStyleClass" containsTarget = True else: item['style']["classes"] = "" for childItem in item.get('items'): childContains = searchChildItems(childItem) if childContains: item['style']["classes"] = "myParentToSelectedPageStyleClass" containsTarget = childContains else: item['style']["classes"] = "" return containsTarget for item in self.props.items: searchChildItems(item) return value ``` ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [October 3, 2022, 10:09pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/3 "2022-10-03T22:09:25Z")
I just create a binding on each tab style 😕 it's a bit crap cause every time you move a tab around or delete them you have to rebind most of them as the index changes......... ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [October 3, 2022, 10:15pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/4 "2022-10-03T22:15:25Z")
Yeah I am trying to avoid this, as its a super-pain ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [October 3, 2022, 10:24pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/5 "2022-10-03T22:24:29Z")
Yeah... Its a pain for all bindings on arrays 😕 bindings should move with the index they're bound to, I have a feautr request already ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [October 3, 2022, 10:26pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/6 "2022-10-03T22:26:06Z")
I went a similar route but used an event instead of a transform and also incorporated recursion so that there could be a variable depth of child items in the menu: > [@\[Perspective\] Highlight current view in Menu Bar](https://forum.inductiveautomation.com/t/perspective-highlight-current-view-in-menu-bar/24804/9): > > I don’t have this in a production system yet, but wanted to throw it out there in case it helps anyone. Instead of binding to every item in the Horizontal Menu and Menu Tree, I wrote a couple scripts that rely on the menu onItemClicked event and the event.path property within that event. The event.path is a list of item indexes that leads to the selected item. First I created a custom session property for holding the current selected path (this is my main menu, so it’s always visible and it c… ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [October 3, 2022, 10:27pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/7 "2022-10-03T22:27:34Z")
> [@WillMT10](#): > > incorporated recursion so that there could be a variable depth of child items in the menu: Probably wasn't clear in initial post, but that was expected to be a recursive transform just like your project function. Yours is better documented though! ---
**Author:** ![WillMT10](https://avatars.discourse-cdn.com/v4/letter/w/7feea3/32.png) [@WillMT10](https://forum.inductiveautomation.com/u/WillMT10)\ **Post date:** [October 3, 2022, 10:28pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/8 "2022-10-03T22:28:13Z")
Oh, you're right. Missed that! ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 4, 2022, 6:28am UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/9 "2022-10-04T06:28:54Z")
You could kinda use :target selector i suppose, and give your button an id But i'm not sure if you can modify enough stuff in perspective to make that work edit: yeah its not working great ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [October 4, 2022, 9:40am UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/10 "2022-10-04T09:40:16Z")
> [@kgamble](#): > > I am trying to automatically apply a style class to a menu item if you are on its target page. I went a somewhat different route to achieve that, but it might be due to some design choices. Every time `navigate` is called, I also send a message called `page_changed`. I need this to update docks (no `alterDock` function available at the time). The menu also catches this message and stores in a custom property what page (sent in the payload) is currently displayed. Every item in the menu can then use that to switch its style class. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [October 4, 2022, 12:36pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/11 "2022-10-04T12:36:48Z")
Instead of on navigate, could you out this on an on change event on the session prop that store the page id? This would be more robust in terms of always catching a change of page ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [October 4, 2022, 12:40pm UTC](https://forum.inductiveautomation.com/t/style-to-currently-selected-page-in-navigation-menu/64778/12 "2022-10-04T12:40:07Z")
It also makes sending some of my payloads more difficult. I was also trying to stay out of session props. I'll take a look though, maybe I can figure something out with this.