How to make navmenu dropdown menu items indicate "isActive" on the main menu dropdown

1

I have a bootstrap navmenu.html implementation modified to have 3 sub levels of menu items. It works. The only thing is that I would like to highlight the main menu item that the submenu sits in if that page has been displayed. At present only top level items show the active highlight. It uses as a class in the original navmenu.html ${route.isActive ? 'active' : ''} Thats fine for the top level menu items but they stay non highlighted for those pages from the lower submenu options. Here is my current navMenu.html

<template>
<require from="./navmenu.css"></require>
<div class="main-nav">
    <div class="navbar navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#/scheduler">Jobsledger</a>
        </div>
        <div class="navbar-collapse collapse">

            <ul class="nav navbar-nav">
                <li repeat.for="route of router.navigation" class="${route.isActive ? 'active' : ''}">
                    <a href.bind="route.href" if.bind="!route.settings.nav"><span class="glyphicon glyphicon-${ route.settings.icon }"></span> ${route.title}</a>

                    <a href.bind="route.href" if.bind="route.settings.nav" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-${ route.settings.icon }"></span> ${route.title} <span class="caret"></span> <!--First level menu heading - requires route.settings.nav to exist-->
                    </a>

                    <ul if.bind="route.settings.nav" class="dropdown-menu">
                        <li repeat.for="menu of route.settings.nav" class="${menu.settings.divider ? 'divider' : 'dropdown-submenu'}">
                            <a href.bind="menu.href" if.bind="!menu.settings.nav"><span class="glyphicon glyphicon-${ menu.settings.icon }"></span> ${menu.title}</a>

                            <a href.bind="menu.href" if.bind="menu.settings.nav" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-${ menu.settings.icon }"></span> ${menu.title} <span class="caret-right"></span>
                            </a>
                            <ul if.bind="menu.settings.nav" class="dropdown-menu">
                                <li repeat.for="subMenu of menu.settings.nav" class="${subMenu.settings.divider ? 'divider' : 'dropdown-submenu'}">
                                    <a href.bind="subMenu.href" if.bind="!subMenu.settings.nav"><span class="glyphicon glyphicon-${ subMenu.settings.icon }"></span> ${subMenu.title}</a>

                                    <a href.bind="subMenu.href" if.bind="subMenu.settings.nav" class="dropdown-toggle" data-toggle="dropdown">
                                        <span class="glyphicon glyphicon-${ subMenu.settings.icon }"></span> ${subMenu.title} <span class="caret-right"></span>
                                    </a>
                                    <ul if.bind="subMenu.settings.nav" class="dropdown-menu">
                                        <li repeat.for="lowestSubMenu of subMenu.settings.nav" class="${lowestSubMenu.settings.divider ? 'divider' : 'dropdown-submenu'}">
                                            <a href.bind="lowestSubMenu.href" if.bind="!lowestSubMenu.settings.divider"> <span class="glyphicon glyphicon-${ lowestSubMenu.settings.icon }"></span> ${lowestSubMenu.title}</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Is there a way of determining if the lower pages linked to that top menu item are loaded and then show the top menu item as highlighted?

2

@si2030
Allow me to offer a few opinionated comments (most of my commens are anyway :smirk:). Our team working on the Aurelia KendoUI Bridge Components catalog application spent a lot of time agonizing over the issue you presented above. Our conclusion was that the ability to always know how did you navigate to a specific menu item is more important than the space used for offering such feature. We also concluded that the generic bootstrap menu is too weak to implement the solution we ended up using a more “fancy” approach shown below:

34457564-6e30378a-ed82-11e7-8b69-a9ec811772e0.png1834×878 172 KB

Image: Viewing Radar Charts requires 4 steps (indicated by green number makers) and the trail of selections is clearly visible

While we used KendoUI toolbars to augment the standard menu object, I do not imply to use it in your case, but rather to hopefully inspire you in your search for the solution.

3

Are you using child routers for the submenus? I am using side bar menus rather than dropdowns for the sub menus and the top level menu highlights the correct item.

4

@rhassler - I am assuming that your question is directed at @si2030, since I just stated that I am not using the submenus for the same reason he is looking for an alternative solution. :smile: