Drilldown menu -> data-grandparent-link possible?

Is there anyway to include the full hierarchy of a drilldown menu as you click deeper?

So if you’ve got

Top Level > Child > Grandchild > Great Grandchild

It wouldn’t just show the immediate ancestor that data-parent-link gives you but links all the way back to the parent top level. Sort of like the marriage of breadcrumbs and a drilldown menu. Trying to avoid a complete custom build for a client who wants the above.

FWIW I managed to make the accordion menu fake this with some js that hides siblings when a top-level menu item’s submenu is open.

This was in JointsWP.

in menu.php (functions folder) items_wrap to include > accordion-menu" data-accordion-menu data-submenu-toggle="true"

My js can be crude, but if anyone needs a jumping off point:

$(document).ready(function() {
		$('#offcanvas-nav li').not('#offcanvas-nav ul li').addClass('top-level');
$(document).ready(function() {
  		$('.submenu-toggle').on('click', function () {

It makes it look like a drilldown, when it’s really an accordion. If anyone has insight into my original question about the drilldown, would love it.

i use an off-canvas with a ‘vertical menu accordion-menu’ inside. Each menu item is a link to a page (the parent and the children).

I use a static id for each tag that represent the nested level → L0 is the root, LA1 is the first grandparent (a node with ‘subnodes’ and or leafs), L11 is ‘subnode’ (for opening this path), LA11 is the next level that could be selectetd and so on.

If you drilldown through the levels i use some javascript to:

First: find the ‘href’ that match with the actual page and get the ‘ID’.
Next: Start at root and took the first 3 Chars from the ‘ID’ and open this ‘menu-level’
If the ‘ID’ has only 3 Chars, select this item, you finished
else took the next char and combine it with the 3 Chars and find the item with the 4 chars and so on until there are no chars available.

I use a static structure since i know the depth of my hierarchy. Not very dynamic elegant or ‘object oriented’. But for me it simple works!!


<div class="off-canvas-wrapper" id="allover">
                    <div class="off-canvas-absolute position-left" id="offCanvasLeftSplit1" data-off-canvas>
                        <!-- Your menu or Off-canvas content goes here -->
                        <ul id="L0" class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
                            <li class="dunkel">
                                <a id="LA1" href="Test-Desktop.html" target="_self">Sternenweg →</a>
                                <ul id="L11" class="menu vertical nested is-active">
                                    <li class="hell">
                                        <a id="LA11" class="hellft" href="prolog.html" target="_self">Prolog</a>
                                        <ul id="L111" class="menu vertical nested">
                                            <li class="mittel"><a id="LA111" class="hellft" href="Unter_der_Milchstrasse.html" target="_self">Unter der Milchstrasse</a>
                                                <ul id="L1111" class="menu vertical nested">
                                                    <li><a id="LA1111" href="Biosphaerenreservat.html" target="_self">Biosphärenreservat</a></li>
                                            <li class="hell"><a id="LA1112" class="hellft" href="Einen Stein ins Rollen bringen.html" target="_self">Einen Stein ins Rollen bringen</a>
                                                <ul id="L1112" class="menu vertical nested">
                                                    <li><a id="LA11121" href="von Wegen.html" target="_self">von Wegen</a></li>
                                            <li class="mittel"><a id="LA1113" href="Kontakt_Jakobusmuschelsteine.html" target="_self">Philosophie</a></li>
                                            <li class="mittel"><a id="LA1114" href="Friedenspilger.html" target="_self">Friedensplilger</a></li>
                                    <li class="mittel">
                                        <a id="LA112" href="Wegezeichen.html" target="_self">Wegezeichen</a>
                                        <ul id="L1121" class="menu vertical nested mittel">
                                            <li><a id="LA11211" href="Symbolik.html" target="_self">Symbolik</a></li>
                                                <a id="LA11212" href="Jakobsmuschelsteine.html" target="_self">Jakobsmuschelsteine</a>
                                                <ul id="L11212" class="menu vertical nested">
                                                    <li><a id="LA112121" href="Kontakt_Jakobusmuschelsteine.html" target="_self">Ansprechpartner Jakobusmuschelsteine</a></li>
                                            <li><a id="LA11213" href="Ornamente.html" target="_self">Ornamente</a></li>
                                            <li><a id="LA11214" href="Sterne.html" target="_self">Sterne</a></li>


    function Open_Menue()
                var m_root = $('#L0');
            // Schließe alle geöffneten Menüs
            // Finde die Menüposition der aktuellen Seite
            // 1. aktuelle Seite
            var Testpfad = window.location.pathname;
            var Teil = Testpfad.substr((Testpfad.lastIndexOf("/")+1));
            var ID_Wert = null;
            var matches = "";
            // 2. Suche den Link
            $("a[href='" + Teil + "']").each(function () {
                matches = $(this);
                ID_Wert = $(this).attr("id");
            // Bearbeitung: Prüfe ID_Wert über length wenn vorhanden dann > 0
            // 1. Schritt var Anz = ID_Wert.length;
            //      Der Aufbau ist immer 'LAxxxx' --> der Level steht im xxx
            // 2. Schritt: var Zahl = ID_Wert.substr(2, (Anz - 2));
            //      Schneide die ersten 2 Zeichen ab
            // 3. Schritt: var Anz_Zahl = Zahl.length;
            //      Bestimme die restlichen Stellen 
            // Ist Anz_Zahl = 1 wurde ein Hauptmenüpunkt angewählt --> markiere diesen als 'Aktiv'
            // $(matches).addClass('gelb');
            // Ansonsten klappe die erste Ebene auf; diese besteht aus 'Lxx'; d.h. immer 2 Zahlen
            // var Menue_1 = "";
            // var L1 = Zahl.substr(0, 2);
            // var L1_Rest = Zahl.substr(2, (Anz_Zahl - 2));
            // Menue_1 = '#L' + L1;
            // m_root.foundation('down', $(Menue_1));
            // Prüfe die weiteren Ebenen; nimm dazu aus Zahl immer die nächste Stelle. Wenn es das Menü 'Lxxx' gibt, klappe das entsprechende Menü auf. 
            // Ansonsten ist der letzte Zweig mit 'LAxxx' und muss als 'Aktiv' markiert werden. 

           var Anz = ID_Wert.length;
            var Wert = ID_Wert.substr(0, 2);
            var Zahl = ID_Wert.substr(2, (Anz - 2));
            var Anz_Zahl = Zahl.length;
            var Menue_1 = "";
            var L1 = Zahl.substr(0, 2);
            var L1_Rest = Zahl.substr(2, (Anz_Zahl - 2));
            var Anz_L1_Rest = L1_Rest.length;
            Menue_1 = '#L' + L1;
            // Es gibt weitere Ebenen
            m_root.foundation('down', $(Menue_1));

            // Nimm Menue_1 und die erste Stelle von L1_Rest
            for (var i = 0; i < Anz_L1_Rest; i++) {
                var Menue_2 = Menue_1 + L1_Rest.substr(0, (1+i));
                // Gibt es den Menüpunkt
                var Test = $(Menue_2).length;
                if (Test > 0) {
                    m_root.foundation('down', $(Menue_2));
                else {

Sorry that my description in code is in german!