Drilldown menu for Wordpress sub pages. For Sage by Roots + TailwindCSS

Off canvas drill down.js

function OffCanvas() {

  const offOPen = document.getElementById('offcanvas__open');
  const offMenu = document.getElementById('offcanvas__menu');
  const body = document.body;
  const offNav = document.querySelectorAll('.nav-secondary ul .menu-item');

  // Open menu
  offOPen.addEventListener('click', function () {

    offMenu.classList.toggle('is-active')
    body.classList.toggle('overflow-y-hidden')
    closeSubmenu()

  });

  // Foreach li elements to find submenu
  offNav.forEach(el => {
    if (el.classList.contains('menu-item-has-children')) {

      const submenuLink = el.firstChild;
      const submenu = submenuLink.nextElementSibling;

      // wrap function
      const wrap = (el, wrapper) => {
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
      }

      // create div wrapper
      let div = document.createElement('div');
      div.classList.add('submenu__container');

      // wrap ul submenu with div submenu__container
      wrap(submenu, div)

      // create span close button
      let createCloseBtn = document.createElement('span');
      createCloseBtn.setAttribute('id', 'submenu__close');

      // Add close menu
      submenu.before(createCloseBtn);

      // Click on submenu link
      submenuLink.addEventListener('click', function (e) {
        e.preventDefault()

        activeSubmenu(this.nextElementSibling)

      })
    }
  });

  // Activate submenu
  const activeSubmenu = (submenu) => {

    const textContent = submenu.previousElementSibling.textContent;
    const close = submenu.firstChild;

    let createMenuTitle = document.createElement('p');
    createMenuTitle.innerText = textContent;


    // insert title
    if (!close.firstChild) {
      close.appendChild(createMenuTitle);
    }

    // add class to submenu
    submenu.classList.toggle('is-active');

  }

  // Close OffCanvas submenu
  const closeSubmenu = () => {

    let subMenus = document.getElementsByClassName('submenu__container');

    // for loop for all sub menus
    for (let i = 0; i < subMenus.length; i++) {

      // current sub menu
      const currentSubMenu = subMenus[i];
      // current sub menu close
      const closeMenu = currentSubMenu.firstChild;

      // close event
      closeMenu.addEventListener('click', function (e) {
        e.preventDefault()

        currentSubMenu.classList.remove('is-active');
      });
    }
  }

}

export default OffCanvas

Off canvas.blade.php

<!-- Mobile Offcanvas Menu -->
<div id="offcanvas__open" class="block lg:hidden">
  <span>Open</span>
</div>

<div id="offcanvas__menu" class="relative">
  <div class="offcanvas__container bg-blue-300 w-full h-full min-h-screen absolute top-0 left-0 z-40">
    <div class="p-8 relative">

      @if (has_nav_menu('secondary_navigation'))
        <nav class="nav-secondary block lg:hidden" aria-label="{{ wp_get_nav_menu_name('secondary_navigation') }}">
          {!! wp_nav_menu(['theme_location' => 'secondary_navigation', 'menu_class' => 'nav flex flex-col', 'echo' => false]) !!}
        </nav>
      @endif
    </div>
  </div>
</div>

off canvas.scss

/* Off canvas */
#offcanvas__menu {
  @apply hidden;

  &.is-active {
    @apply block;
  }
}

/* Submenu */
.nav-secondary {
  .submenu__container {
    @apply opacity-0 h-0 invisible transition-all;

    &.is-active {
      @apply p-8 opacity-100 h-auto visible absolute w-full h-full bg-red-500 left-0 top-0 min-h-screen;
    }

    ul {
      @apply mt-6;
    }
  }

  #submenu__close {
    @apply w-full h-6 bg-blue-600 flex justify-end relative;

    &:before {
      @apply content-['<BACK'] absolute left-0;
    }
  }

  li {
    >a {
      @apply relative w-full block bg-purple-500 mt-2;
    }
  }

  li.menu-item-has-children {
    >a {
      &:after {
        @apply content-['>'] absolute right-0;
      }
    }
  }
}

register menu.php

// Register second menu for mobile ( setup.php )

register_nav_menus([
    'primary_navigation' => __('Primary Navigation', 'sage'),
    'secondary_navigation' => __('Secondary Navigation', 'sage')
]);

tutorial.md

1. Register new naviagation

'secondary_navigation' => __('Secondary Navigation', 'sage')

2. Coppy all files to your theme

3. Create new menu with sub pages, parent page as custom link with # in link.

• title in top bar is copied from link name, so it shouldn't be problem with multi langage.
• styles are prapred in .scss file to customize by yourself.