Has 2025/Mx 10.24 provided a simple way to highlight the active page on navigation lists when opening a page?

0
I still find it surprising there is no way to highlight the active page in a navigation list when opening a page. Though I might be outdated in regards to Mx10.24 capabilities. 2026 is almost knocking on the door, have we already found a solution for this?   Sure, if I'm putting my navigation list in a snippet, put it on multiple pages and click one of those navigation list items, that specific item gets highlighted. However, if I navigate from outside any of those navigation list-pages, to one of them, that specific page doesn't get highlighted.   Sure, I can use Javascript or some pagehelper entity, but it's quite cumbersome, while it could be so much simpler. We now also have variables in snippets, but are unable to pass variables between pages and snippets. Otherwise I could simply create a variable on my page "ActivePage(INT) = 1)" and have a variable in the snippet ("ActivePage(INT)") and add some conditional logic (If $ActivePage = 1 then 'Active' ). Sadly, passing variables between pages and snippets is not possible.   Basically, if I navigate from my homepage to my settings page and I have a sidebar containing a navigation list with all settings-pages, I simply want the first item to be highlighted already.    How do you work around this issue?
asked
2 answers
1

Hoping for something cleaner and less error prone, but here's what I do:

Wrap the snippet with your navigation list(s) in a container, add class navlistwrapper and in the common tab name it for example containerFoo (start always with "container"), which Mendix translates to class mx-name-containerFoo.

Give every navigation list item caption a name starting with "text" corresponding to the wrapper container on its page, for example textFoo, wich then translates to a class mx-name-textFoo.

Below the navigation list, add a snippet (reusable) with an Event calling a nanoflow calling a javascript action which searches for navlistwrapper, takes the part after it's class mx-name-container... (e.g. "Foo") and highlights the item with with corresponding class mx-name-textFoo:


const wrappers = document.getElementsByClassName('navlistwrapper');
[].forEach.call(wrappers, function(wrapper) {
    const classNames = wrapper.classList;
    classNames.forEach(name => {
        if (name.startsWith("mx-name-container")){
            var targetClass = "mx-name-text" + name.substring(17);
            const target = wrapper.getElementsByClassName(targetClass)[0];
            // the line below will throw an error if target === undefined, which is good
            target.classList.add("text-bold", "text-primary");
        }
    })
})
answered
0

Also curious to hear how others are dealing with this

answered