Debut Theme: Multi-level drop-down menus

New Member
7 0 0

Hi!

I am hoping to achieve Multi-level drop-down menus within the Debut theme. 
I've taken a quick stab at the code, but can't quite get my head around it - if anyone can lend a hand!?

within site-nav.liquid  :

<ul class="site-nav list--inline {{ nav_alignment }}" id="SiteNav">
  {% for link in linklists[section.settings.main_linklist].links %}
    {%- assign child_list_handle = link.title | handleize -%}

    {% if linklists[child_list_handle].links != blank %}
      <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}">
        <a href="{{ link.url }}" class="site-nav__link site-nav__link--main" aria-has-popup="true" aria-expanded="false" aria-controls="SiteNavLabel-{{ child_list_handle }}">
          {{ link.title }}
          {% include 'icon-chevron-down' %}
          <span class="visually-hidden">{{ 'layout.navigation.expand' | t }}</span>
        </a>

        <div class="site-nav__dropdown" id="SiteNavLabel-{{ child_list_handle }}">
          <ul>
            {% for childlink in linklists[child_list_handle].links %}
              <li {% if childlink.active %}class="site-nav--active"{% endif %}>
                
                <a href="{{ childlink.url }}" class="site-nav__link site-nav__child-link{% if forloop.last %} site-nav__link--last{% endif %}">{{ childlink.title | escape }}</a>
                {% if linklists[link.handle].link.size > 0 %}
               <div class="site-nav__dropdown" id="SiteNavLabel-{{ child_list_handle }}">
                <ul>
                {% for sublink in linklists[link.handle].links %}
                  <li>
                    <a href="{{ sublink.url }}">{{ sublink.title | escape }}</a>
                  </li>{% endfor %}
                 </ul></div>{% endif %}
              </li>
            {% endfor %}
          </ul>
        </div>
      </li>
    {% else %}
      <li {% if link.active %}class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}" class="site-nav__link site-nav__link--main">{{ link.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

 

0 Likes
Shopify Staff (Retired)
Shopify Staff (Retired)
238 0 22

Hey Kyle!

I'm Daryoush, on the Guru team here at Shopify! :)

I am personally a big fan of multi-level drop-down menus! On the Debut theme, it's not a supported feature and I don't believe it can be implemented via code customization. The good news is that you can implement this by using one of these two apps:

- Mega Menu (can use the free version)
- Bacon Mega Menu

I hope this helps and have a lovely day!

Cheers,
Daryoush

0 Likes
Shopify Expert
48 0 11

Hi all,

For those of you to notice the broken Bacon Mega Menu link: you can access it here. We've recently rebranded the app and it is now called Meteor Mega Menus. It's completely restructured, features 5 new menu templates & unique editing options, and is responsive and fast. If you're looking to build multi-level dropdown menus, you should definitely check it out!

Helium Development Shopify Developer, Website Design, App Development
0 Likes
Excursionist
18 0 5

this is stupid.  just saying.  Don't put a theme out there that cant achieve basic website functionality. get rid of it!

1 Like
Excursionist
18 0 5

making everyone pay a monthly fee for every single add on gets to be insane.  This is crazy business!  Magento doen't do this... so after setting up my store with all apps/plugins needed, you could be spending a pretty penny every month.  not cool.

0 Likes
Highlighted
Tourist
15 0 2

Hello, everyone

For those who still needs this, I want you to know it is possible without using any app for it with just some modifications in the code to have multilevel menus.

Nitin Sharma
2 Likes
Excursionist
18 0 5

Modification did not work in the "Debut" theme folloing Shopify's instructions.... fyi

0 Likes