How to Convert Shopify Header Drawer Menu into a Dropdown Menu (With Code)

If you’ve ever felt that your Shopify header menu drawer opens too many new panels, making navigation a bit clunky—especially on desktop—this guide is for you. In today’s tutorial, we’ll walk through how to convert your header menu's drawer navigation into a cleaner, more intuitive dropdown style, which helps your users stay on the same screen while exploring sub-menus.

This approach improves UX significantly, especially when your menus have multiple nested levels.

 

Why Change from Drawer to Dropdown?

The drawer menu, while great for mobile, can become confusing on desktop when:

• Clicking a menu item opens a new panel from the right.

• Users are taken away from the current view.

• They have to keep navigating back manually.

Instead, with a dropdown menu, users can view all sub-menus under the parent item right where they are—making navigation smoother and faster.

Key Benefits of Dropdown Menus:

• No need to open a new drawer or tab.

• Sub-menus are visible directly beneath the parent menu item.

• Consistent navigation across both desktop and mobile.

• Better control over multiple levels of navigation (like About Us → Our Team → Careers).

Step-by-Step Guide to Implement Dropdown Menu in Shopify

 

Step 1: Access Your Shopify Theme

1. Go to your Shopify Admin Panel.

2. Click on Online Store > Themes.

3. Duplicate your current theme (as a backup).

4. Click the three dots (...) next to your active theme and choose Edit Code.

Step 2: Edit Header Code

You’ll need to modify two main files:

• header.liquid

• An SVG icon file (for the arrow/chevron icon)

🔧 Instructions:

1. Search for header.liquid.

2. Locate the existing arrow SVG and comment it out.

3. Replace it with a custom arrow SVG that fits your dropdown design.

 

 <div class="icon icon-arrow arrow-container" onclick="toggleArrow(this)">

    <svg class="icon icon-arrow up-arrow" width="20px" height="20px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">

        <path d="M7.5 3L15 11H0L7.5 3Z" fill="white"/>

    </svg>

    <svg class="icon icon-arrow down-arrow" width="20px" height="20px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;">

        <path d="M7.49988 12L-0.00012207 4L14.9999 4L7.49988 12Z" fill="white"/>

    </svg>

</div>

 

Then scroll down to the bottom of header.liquid.  Just before the schema ends, paste the dropdown functionality code.

 

 

  

<style>

  .js .menu-drawer__navigation .submenu-open { visibility: visible !important;}

   .js .menu-drawer__submenu { position: static !important; visibility: visible !important; transform: translate(0) !important;}

    body .menu-drawer__close-button { display: none!important;}

      .menu-drawer__menu.list-menu {

      padding: 0px 25px;

}

</style>

 

          <script>

            function toggleArrow(element) {

                const upArrow = element.querySelector('.up-arrow');

                const downArrow = element.querySelector('.down-arrow');

            

                if (upArrow.style.display === 'none') {

                    upArrow.style.display = 'block';

                    downArrow.style.display = 'none';

                } else {

                    upArrow.style.display = 'none';

                    downArrow.style.display = 'block';

                }

            }

 

              document.addEventListener('click', function (event) {

                  const target = event.target.closest('.js .menu-drawer__navigation .submenu-open');

                  

                  if (target) {

                      toggleArrow(target);

                  }

              });

            </script>

Step 3: Save & Preview

• Click Save after inserting the code.

• Go back to your storefront and click Preview.

🤝 Need Help?

If you run into any issues:

• Feel free to reach out via contact info in the description.

• Comment below the video.