Ability to hide 3rd level categories from Mega Menu?

[Kelli Tomasino]

Hi!

Wondering if anyone has been able to (or if it is even possible) to hide some 3rd level categories from the mega menu. We are transitioning to EC from a custom portal and have a robust taxonomy that we will be cutting down, but would prefer to only show the 3rd level categories for our main 2nd level categories (Pay, Benefits, Career).  If we add too many more 2nd/3rd level lists the page will just get too long and cluttered. Our other option is to just leave some of them without the 3rd level category but would like to filter them one more level if possible, without it showing on the mega menu.

I pulled a general screenshot from SN and added labels to show what I mean when I say 1st, 2nd, 3rd level.

Thank you!

[Marry Vieira]

Content Taxonomy > taxonomies > select the appropriate taxonomy (probably Employee) and disable it. 

[mak1A4 · Accepted solution]

@Kelli Tomasino There is a way to achieve this without cloning the OOTB Widget. You have to create a UI-Script in the global scope with the following code:

(function() {

    function waitForElement(selector, timeout, interval) {
        return new Promise(function(resolve, reject) {
            var elapsedTime = 0;
            var checkForElement = function() {
                var element = document.querySelector(selector);
                if (element) {
                    resolve(element);
                } else if (elapsedTime >= timeout) {
                    reject(new Error("waitForElement: Timeout exceeded while waiting for element with selector >> " + selector));
                } else {
                    elapsedTime += interval;
                    setTimeout(checkForElement, interval);
                }
            };
            checkForElement();
        });
    }

    waitForElement(".v045301ddeb503010ed7966d647522844", 30000, 100).then(function(element) {
        var ecnavScope = angular.element(element).scope();
        if (!ecnavScope) return;

        var menuItemIds = new Set(ecnavScope.data.menuItems.map(function(item) {
            return item.sys_id;
        }));
        for (var key in ecnavScope.data.menuItemToChildrenMap) {
            if (!menuItemIds.has(key)) { //key == sys_id of a topic, you can exclude some topics from being removed here
                delete ecnavScope.data.menuItemToChildrenMap[key];
            }
        }
    });
})();

This will hide all 3rd Level Topics from the Menu if you create a JS Include Dependency for that UI-Script and add that to your EC Portal Theme. If don't want to hide all 3rd Level Topics you can modify the script exclude certain sys_ids (check the comment in the code). You could go even further and create a custom field on the topic table and make a rest call in this script to only hide the topics that have the custom field set to true.