Adding Drop-Down Arrows to the Menu

Store Design
, , , , ,

Topic summary

A user wants to add collapsible drop-down arrows to their desktop menu navigation to prevent the CATEGORY section from becoming too long as they add more items. They reference their mobile version, which already has expandable/collapsible functionality with arrows, and want to replicate this behavior on the PC version.

Current situation:

  • Menu items are expanding the CATEGORY section (example: FOOD added under FOOD & DRINK)
  • Mobile version already has the desired collapse/expand functionality
  • Desktop version lacks this feature

Proposed solution:
Another user provided code snippets including:

  • Navigation markup modifications to add drop-down arrows (▼)
  • CSS for styling
  • JavaScript for click-to-expand functionality

Status: The original poster is asking for clarification on where to implement the provided code. The discussion remains open with implementation details pending.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello, I hope I am posting this in the proper area.

I am working on adding more menu items to my CATEGORY section. However, if I do this, I fear the CATEGORY section will get unnecessarily long. As you can see below, I’ve added the menu item FOOD to come below FOOD & DRINK.

スクリーンショット 2025-03-24 174643.png
スクリーンショット 2025-03-24 174643.png2256×1253 325 KB

I am wondering if there is a way to make the PC version like the smart phone version. In this version, you can collapse and expand the section by clicking on the arrow.

IMG_2889.png
IMG_2889.png1125×2436 148 KB

I apologise if I am not clear enough of what I would like to do. Please let me know if you need further information!

Website: https://j-beautynatural.com/

2

Hi,

Hope this will help

  • Edit your navigation code
  • Add Drop-Down Arrow
    Code example

  {% for link in linklists.main-menu.links %}
    - {{ link.title }}
        {% if link.links != blank %}
          ▼
        

            {% for sub_link in link.links %}
              - {{ sub_link.title }}
            {% endfor %}
        
        {% endif %}
    
  {% endfor %}
  • Add css for style
  • Add JavaScript for Click to Expand

Javascript example

document.querySelectorAll('.dropdown-arrow').forEach(arrow => {
  arrow.addEventListener('click', function(event) {
    event.preventDefault();
    let submenu = this.nextElementSibling;
    submenu.style.display = submenu.style.display === "block" ? "none" : "block";
  });
});
3

Thank you so much for your message!

If I were to add these codes, where would I add them?