The Case worker and Case Manager portals included in UI-kit use a flat list of navigation items in the sidebar

But sometimes a flat list can become too long and you need to break it up in sub menu items. Each submenu could be generated from the same navigation rule or by referencing another navigation rule. This is the case of the Pega Marketing portal

As you can see from the screenshot below, the out of the box implementation of the navigation menubar will only show one active menu for only the items that are at the same level. Sub-menu items will have their own handling of which item is active.

In the context of a navigation menu, this could be problematic since you only want to have one menu active at a given time; this item should reflect the page currently visible on the screen.

If we try to add a new sub-menu item called 'collaboration' for the case manager portal, you can end up having 2 active menus on the screen

To implement this functionality, you can create a new Javascript file and load it in your portal harness under the 'Scripts and styles' tab, and ddd the following snippet of code in the JS file:

var NavMenu = document.querySelector(".menu-format-primary-navigation");
if(NavMenu !== null) {
  NavMenu.addEventListener("click", function(e) {
    var myCurrentEl = e.target.closest(".menu-item");
    var activeMenus = document.querySelectorAll(".menu-format-primary-navigation .menu-item-active");
    if (activeMenus != null) {
        Array.prototype.forEach.call(activeMenus, function(el, i) {
            if (el !== myCurrentEl) {
                el.classList.remove("menu-item-active");
            }
        });
    }
  })
}

Note that 'menu-format-primary-navigation' should be the format of the primary navigation menubar used in the sidebar - for example, the Case Manager portal navigation section (pyPortalNav) uses the configuration of the menu bar set to 'Primary Navigation'.

The classname associated with this menu will start with 'menu-format-' and then the name of the format in lowercase with space replaced by underscore.

Note: If you are using UI-Kit, there is a Javascript function called 'collapseAllMenus' in pyPortalNavInner that collapses all submenu items - This function is called on every click on a menu item (see action set in pyCaseManagerLinks).

To use the snippet you need to make sure that the 'collaseAllMenus' runscript action is removed from the navigation rule. After updating the navigation rule to add a new sub-menu called 'collaboration', the snippet of code above allows to only have one item active including when clicking on a sub-menu item.