Help creating a dropdown menu module

[Amita]

Hi everyone!

I'm looking for a way to turn the "simple menu" module into a dropdown list instead of an actual page menu structure, but I've run into a roadblock. I'm probably doing something wrong (trial and error over here!) so any guidance would be much appreciated!

Here's the code I've used to create my own module:

<div class="version-changer">
<p>Current as of 
<select id="version-dropdown">
{% for node in module.menu_tree %}
<option value="{{ node.menu-item.link }}">{% simple_menu menu_tree="{{ module.menu_tree }}" %}</option>
{% endfor %}
</select>
</p>
</div>

And I'm just using the Simple Menu (label: menu_tree) to do this.

However, when I test this out and add a few menu items for the dropdown to display, I run into issues. 

If my options are:

- Blog (/blog)

- News (/news)

- Events (/events)

Then the dropdown menu produces this:

- Blog News Events

- Blog News Events

- Blog News Events

I've tried using ChatGPT to help me understand what I'm doing wrong, but when I use the suggestions that it gives me, all the text disappears from the dropdown and I just see 3 (or however many) blank options.

Any help would be amazingly appreciated! 🙏 

[Amita]

Hi @Jaycee_Lewis! Thanks for your reply! I have not found a solution to this so far... I tried tinkering with the code based on your insight and I couldn't get a better result that the repeated menu items in each option. If I removed the simple_menu tag from within the loop for each node, all the options went blank like this:

The only way that I have managed to get the menu items to populate (albeit all of them every time) was to have simple_menu included in each node... So I'm still stuck 🤪

[Jaycee_Lewis]

Hey, @Amita 👋 Thanks for reaching out. Did you get this resolved? If not, it looks like you are using the simple_menu tag within a loop for each node in your menu_tree. I wonder if this is causing all the menu items to be rendered for each option in the dropdown.

Thanks! — Jaycee