I created a solution which i thought i would post in case it helps someone else.
It is a side menu that works on the Debut Theme from Shopify and provides an expandable & collapsible multi level menu which highlights active items and expands sub-menus with active links. You can have multiple sub-menus and up to three levels.
1. Create a snippet called sidenav
{% comment %}
Renders a list of menu items as vertical collapsable dropdown list
Accepts:
- linklist: {Object} Linklist Liquid object (required)
Usage:
{% include 'side-nav', linklist: section.settings.main_linklist %}
{% endcomment %}
<ul class="sidenav">
{% for link in linklists[linklist].links %}
{% if link.links != blank %}
<button class="site-nav__link--button dropdown-btn{% if link.active %} active-link {% else %}{% for child_link in link.links %}{% if child_link.active %}active-link{% endif %} {% endfor %} {% endif %}">{{ link.title }}
<i class="fa fa-caret-down"></i>
</button>
<ul class="child dropdown-container{% if link.active %} active-link {% else %}{% for child_link in link.links %}{% if child_link.active %}active-link{% endif %} {% endfor %}{% endif %}">
{% for child_link in link.links %}
{% if child_link.links != blank %}
<button class="site-nav__link--button dropdown-btn{% if child_link.active %} active-link {% else %}{% for grandchild_link in child_link.links %}{% if grandchild_link.active %}active-link{% endif %} {% endfor %}{% endif %}">{{ child_link.title }}
<i class="fa fa-caret-down"></i>
</button>
<ul class="grandchild dropdown-container{% if child_link.active %} active-link {% else %}{% for grandchild_link in child_link.links %}{% if grandchild_link.active %}active-link{% endif %}{% endfor %}{% endif %}">
{% for grandchild_link in child_link.links %}
<li {% if grandchild_link.active %}class="active {% if grandchild_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ grandchild_link.url }}">{{ grandchild_link.title }}</a></li>
{% endfor %}
</ul>
{% else %}
<li {% if child_link.active %}class="active {% if child_link.child_active %}child-active{% endif %}"{% endif %}><a href= "{{ child_link.url }}">{{ child_link.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
{% else %}
<li {% if link.active %}class="active {% if link.child_active %}child-active{% endif %}"{% endif %}><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endif %}
{% endfor %}
</ul>
2. In your new page template for pages to use the side menu add the following script.
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
</script>
3. Add CSS to theme.css or your own css file used in the template ...
.active-link {display:block!important;}
/* Fixed sidenav, full height */
.sidenav {height: 100%;z-index: 1;top: 0;left: 0;overflow-x: hidden;}
/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {cursor: pointer;white-space: nowrap;display: block;}
.sidenav .active a {text-decoration: underline;}
/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover, .sidenav .active, .sidenav .active-link .active, .sidenav button.active-link {text-decoration: underline;}
.sidenav li {padding: 3px 10px;}
.sidenav .child {padding-left: 10px;}
.dropdown-container {display: none;}
4. And finally, in your page template where you want the menu to appear ... add the following replacing the "sidebar-menu-handle" with the handle of your menu.
{% include 'side-nav', linklist: 'sidebar-menu-handle' %}
There will no doubt be more styling, but this worked for me.
