Style to currently selected page in navigation menu

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!

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:


The code on the transform:

def searchChildItems(item):
	containsTarget = False
	if item.get('target') == value.pagePath:
		item['style']["classes"] = "mySelectedPageStyleClass"
		containsTarget = True
		item['style']["classes"] = ""
	for childItem in item.get('items'):
		childContains = searchChildItems(childItem)
		if childContains:
			item['style']["classes"] = "myParentToSelectedPageStyleClass"
			containsTarget = childContains
			item['style']["classes"] = ""
	return containsTarget
for item in self.props.items:
return value

I just create a binding on each tab style :confused: 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.........

Yeah I am trying to avoid this, as its a super-pain

Yeah... Its a pain for all bindings on arrays :confused: bindings should move with the index they're bound to, I have a feautr request already


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:

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!

Oh, you're right. Missed that!

1 Like

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

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.


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

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.