Creating Custom Multi-Level Dropdowns

This guide will go through how to implement a custom multi-level dropdown with Liquid. This guide will assume you are creating a dropdown with 3 levels. Let's get started.

Start with your dropdown structure, do this by going into admin -> navigation and creating a new nav tree. Using the Shopify UI, drag and drop each link under each category, and create a nested nav. Name your new navigation and hit save. Keep in mind what you named it as you will reference it later.

Second, create a new snippet for your nav to live. After we add the code in here, you can include this snippet on theme.liquid, or wherever you might need it. In this file, you are going to add something that looks similar to this.

Above, you create a for loop that loops through your nav name, the example here is store-menu. Use the include of navbar-link, which will do most of the work for us. Navbar-link includes submenu and dropdown logic to handle the rest of the work for us.

Now go back to your admin -> themes -> customize, and select Navigation from the theme menu. Scroll down and make sure Multiple Level Dropdowns is check marked as Yes. Now your nested dropdown menu should appear. Now it's time to add the actual hover over effect.

Open up navbar-sub-links.liquid, and replace the li class="submenu" code with something like this.

• {{ l.title }}

{% for l in linklists[submenu].links %} {% include 'navbar-sub-links' %} {% endfor %}

Here we added some classes to call in our CSS, as well as a "b" caret tag to show the user this is a hover dropdown. Now go to your custom.scss.liquid and add these lines of code.

    #dropdown-test{
        display: none;
    }

    .toggle-test:hover #dropdown-test {
        display: block;
    }

This will make sure your dropdown is hidden, until the user hovers over. And this is all done using CSS only...boom, you're done!