Add third level menus

Our theme supports only two levels in the sidebar menu. If you want to group menu items in three different levels, you'll have to do a bit of tweaking.

First of all, you have to use the same naming convention that's required for the second level menu, as explained  in this article

Second, you have to modify some theme files. The first one is /snippets/sidebar_nav-main.liquid - replace the main for loop with the code which is below. Here's exactly what to target:

<ul class="top-menu size-{{ menu_size | lstrip | rstrip }}">
   {% for link in linklists['main-menu'].links %}
      ...
   {% endfor %}
</ul>

So you need to replace everything between the {% for link ... and {% endfor %}, including these two tags, with the following code:

{% for link in linklists['main-menu'].links %}
   {% assign child_list_handle = link.title | handleize %}
   {% if linklists[child_list_handle].links != blank %}
      {% assign submenu_active = false %}
      {% for childlink in linklists[child_list_handle].links %}
         {% if childlink.active %}
            {% assign submenu_active = true %}
         {% endif %}
      {% endfor %}
      <li class="submenu{% if link.active or submenu_active %} selected{% endif %}" aria-haspopup="true">
         <a href="{{ link.url }}">
            {{ link.title }}
            {% include 'asset_svg' with 'arrow_icon' %}
         </a>
         <ul class="sub-menu">
         {% for childlink in linklists[child_list_handle].links %}
            {% assign grand_child_list_handle = childlink.title | handle %}  
            {% if linklists[grand_child_list_handle] and linklists[grand_child_list_handle].links.size > 0 %}
               {% assign thirdmenu_active = false %}
               {% for grandchildlink in linklists[grand_child_list_handle].links %}
                  {% if grandchildlink.active %}
                     {% assign thirdmenu_active = true %}
                  {% endif %}
               {% endfor %}
               <li class="thirdmenu{% if link.active or thirdmenu_active %} selected{% endif %}" aria-haspopup="true">
                     <a href="{{ link.url }}">
                        {{ childlink.title }}
                     {% include 'asset_svg' with 'arrow_icon' %}
                  </a>
                  <ul class="third-menu">
                     {% for grand_childlink in linklists[grand_child_list_handle].links %}
                        <li{% if grand_childlink.active %} class="selected"{% endif %}>
                           <a href="{{ grand_childlink.url }}">{{ grand_childlink.title }}</a>
                           </li>
                        {% endfor %}
                  </ul>
               </li>
            {% else %}
               <li{% if childlink.active %} class="selected"{% endif %}><a href="{{ childlink.url }}">{{ childlink.title | escape }}</a></li>
            {% endif %}
         {% endfor %}
         </ul>
      </li>
   {% else %}
      <li{% if link.active %} class="selected"{% endif %}>
         <a href="{{ link.url }}">{{ link.title }}</a>
      </li>
   {% endif %}
{% endfor %}

Next, you have to go inside  /snippets/sidebar_nav-collections.liquid and do the exact same thing for the main for loop there, with the exception of the first row, which should actually be:

{% for link in linklists[current_menu].links %}

At this point, if both files are correctly replaces and the menu structure is good, you should see a third level menu. It is unstyled though, so in order to style it you'll have to add the following CSS code at the bottom of the theme's main stylesheet: /assets/css_main.scss.liquid:

#menu .thirdmenu > a {
   position: relative;
}
#menu .thirdmenu svg {
   top: 13px !important;
   transform: rotate(0deg) !important;
   fill: $pagesSubmenu !important;
}
#menu .thirdmenu.opened svg {
   transform: rotate(180deg) !important;
}
#menu .third-menu {
   margin: 0;
   display: none;
}
#menu .third-menu > li {
   font-size: 11px;
   line-height: 11px;
}
#menu .sub-menu > li {
   font-size: 12px;
   line-height: 12px;
}
@media all and (max-width: 900px), (max-device-width: 1024px) {
   #menu .top-menu .thirdmenu a svg {
      top: 13px !important;
   }
   #menu .collections-menu .thirdmenu a svg {
      top: 21px !important;
   }
   #menu .collections-menu .thirdmenu li a {
      font-size: 14px;
      line-height: 14px;
      padding: 12px 20px !important;
   }
}

Now, with the code above, you should also have a nicely styled menu. You can go beyond this styling of course, but this is outside the scope of our tutorial. Last thing that you have to do is enable the dropdown functionality. For this, you have to open /layout/theme.liquid and add some code right before the closing body tag:

</body>
</html>

So just above this code, add the following snippet:

<script type="text/javascript">
   $('#menu .sub-menu').find('a').click(function(e){
      var $this = $(this).parent();
      if ( $this.hasClass('thirdmenu') ) {
         var $menu = $this,
            $submenu = $this.children('ul');
           if ( $menu.hasClass('opened') ) {
              $menu.removeClass('opened');
              $submenu.stop().slideUp({
                  duration: 150,
                  easing: 'easeOutQuad',
                  progress: function(){
                     $(window).trigger('resize');
                  },
                  complete: function(){
                     setTimeout(function(){
                        $(window).trigger('resize');
                     }, 100);
                  }
               });
           } else {
              $menu.addClass('opened');
              $openedMenu = $submenu;
              $submenu.stop().slideDown({
                  duration: 200,
                  easing: 'easeInQuad',
                  progress: function(){
                     $(window).trigger('resize');
                  },
                  complete: function(){
                      $(this).css('overflow', 'visible');
                     setTimeout(function(){
                        $(window).trigger('resize');
                     }, 100);
                  }
               });
           }
           e.preventDefault();
      }
   });
</script>

You're done! If all steps were done correctly, you should now have a nicely working menu with three levels!