Change Active Navigation Menu Item

0
Hi our requirement is to change the active navigation menu item. It may happen that a user navigates in the details view to a page which is assigned to a menu item. We would like to activate / highlight the menu item from a microflow or nanoflow or however possible, We couldn’t find any option to do that. Is it possible? best regards Stefan Mayer
asked
1 answers
1

Yes, it’s possible using nanoflow and JS action. All your navigation menu items are in a container, then the JS action removes the active state from all menu items in container, and add active state to target selector.

See JS action below

 

// This file was generated by Mendix Studio Pro.
//
// WARNING: Only the following code will be retained when actions are regenerated:
// - the import list
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import "mx-global";
import { Big } from "big.js";

// BEGIN EXTRA CODE
// END EXTRA CODE

/**
 * Remove the active state on all menu items in parent selector i.e. 'containerMxNavigationtree', and add active state to target selector i.e. 'actionButtonHome'
 * @param {string} targetSelector
 * @param {string} parentSelector
 * @returns {Promise.<void>}
 */
export async function JS_SetActiveState(targetSelector, parentSelector) {
	// BEGIN USER CODE
    const parentNode = parentSelector ? document.querySelector(".mx-name-" + parentSelector) : null;
    if (parentNode) {

        // Get all active menu items from inside the parent container
        const activeItems = parentNode.querySelectorAll(".active");

        // Remove the active state from any/all of the menu items
        activeItems.forEach(menuItem => menuItem.classList.remove("active"));

        const targetNode = targetSelector ? parentNode.querySelector(".mx-name-" + targetSelector) : null;
        if (targetNode) {

            // Add the active class to the target selector i.e. button
            targetNode.classList.add("active");
            
        } else {
            console.warn(`No DOM node found to set active state for query selector ${targetSelector} in parent selector ${parentSelector}`);
        }
    }
	// END USER CODE
}

 

answered