Change highlighted item in the navigation pane according to the visited page. - Mendix Forum

Change highlighted item in the navigation pane according to the visited page.

36

Now the highlighting of navigation items only changes when the actual navigation item is clicked. But when navigating to a page by clicking on a link on a page, the highlighting stays on the last clicked navigation item, thus the highlighted item is not representing the visited page. This possibly confuses the user in navigating the application. 

asked
9 answers

I encountered this idea while troubleshooting multiple navigation menus and trying to fix them, as Jason suggested. However, I discovered a workaround by combining the Navigation Item Selector from the marketplace with some custom JavaScript.

The problem with multiple menus was that even with the Navigation Item Selector, the .active class would still apply to the last visited page for each individual menu.

To solve this, I implemented the following JavaScript, which clears all the active classes from your navigation menus, allowing the Navigation Item Selector to apply the active class only to the item you specify:

 

// Add a slight delay to ensure the DOM is ready
setTimeout(function() {
    const activeItems = document.querySelectorAll('a.active');
    console.log("Active items found: ", activeItems.length);

    // Loop through each active item and remove the 'active' class
    activeItems.forEach((item, index) => {
        console.log(`Removing active class from item ${index + 1}:`, item);
        item.classList.remove('active');
    });
}, 200);

// Adjust the delay (200ms) if needed for stability

 

Depending on the amount of data and loading speed, you may need to tweak the delay for better results.

At the moment, there's one key issue with this workaround if you're using multiple languages in your application. While your navigation items will be translated, the input for the Navigation Item Selector won’t be and therefore it won't apply the active class.

Created

If anyone stumbles across this topic, use the Active Menu Selector widget. Unfortunately not in de Marketplace, but you can find it here. Works in our 9.18.7 projects

Created

this is even worse when you are using multiple navigation menus for if you want to break them up with sub headers

Created

Great idea! Also experienced this behaviour. 

Created

Great Idea. This would help us a lot since we now have to mimic this behaviour by giving every page a custom CSS class.

Created

Great suggestion! So many users are complaining about this behaviour...

Created

you can use below css to make selected item highlighted

 

.mx-navbar ul.nav > li.mx-navbar-item.active{

    /* border-bottom: 5px solid red; */

    border-bottom: 5px solid white;

}

.region-topbar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {

    color: red;

    background-color: #fff;

}

 

Created

Thanks! I will look into it.

Created

Not sure if this is what you are looking for however I created this little script that you can throw in an HTML snippet that throws an activeparent class to the parent item of the page you are viewing:

// Top nav highlight parent when level 2 page currently active
$('.nav a').on("click", function () {
setTimeout(function() {
$(".mx-navbar-item").removeClass('activeparent');
$(".mx-navbar-item .mx-navbar-subitem.active").parent().parent().addClass('activeparent'); 
}, 1);
});
 

Created