How to add a custom dropdown menu in Magento2 to a PHTML template

Question

How can you add a custom dropdown menu in a Magento PHTML template?

So far, I've created the template in my theme and the markup is showing on the frontend.

This is the markup I'm using

<div class="actions dropdown example-dropdown-2">
 <button class="action toggle"
 data-mage-init='{"dropdown":{}}'
 data-toggle="dropdown"
 aria-haspopup="true">
 <span>button + dropdown</span>
 </button>
 <ul class="dropdown">
 <li>
 <span class="item">One</span>
 </li>
 <li>
 <span class="item">Two</span>
 </li>
 <li>
 <span class="item">Three</span>
 </li>
 </ul>
</div>

But the drop down is not being initialized by javascript, it's just showing the normal HTML. I thought data-mage-init='{"dropdown":{}}' would initialise the dropdown widget but it doesn't.

Do I need to add a script, similar to how they have done in app/code/Magento/Customer/view/frontend/templates/account/customer.phtml with:

<script type="text/x-magento-init">
{
 "*": {
 "Magento_Ui/js/core/app": {
 "components": {
 "customer": {
 "component": "Magento_Customer/js/view/customer"
 }
 }
 }
 }
}
</script>

I'm not sure what "component": "Magento_Customer/js/view/customer" is for?

UPDATE

I found I could add a tooltip with...

<div class="field-tooltip toggle">
 <span class="quick-menu about-dd"
 tabindex="0"
 data-toggle="dropdown"
 data-mage-init='{"dropdown":{"activeClass": "_active"}}'>About</span>
 <ul class="field-tooltip-content" data-target="dropdown">
 <li>
 <span class="item">One</span>
 </li>
 <li>
 <span class="item">Two</span>
 </li>
 <li>
 <span class="item">Three</span>
 </li>
 </ul>
</div>

I can't find anyway of doing the same to get a dropdown, is there a way to do this?

Answer 1

UPDATE June 2020

This answer is old and now Magento has better docs which describe how this can be done.

Please check: https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_dropdown.html

---

In the end I got it working with the below:

<ul class="quick-links">
 <li class="links-container">
 <span data-mage-init='{"dropdown":{}}' data-toggle="dropdown">About</span>
 <div class="customer-menu" data-target="dropdown">
 <ul class="header links">
 <li><a href="/contacts">Link 1</a></li>
 <li><a href="/contacts">Link 2</a></li>
 <li><a href="/contacts">Link 3</a></li>
 </ul>
 </div>
 </li>
</ul>

I'm not sure why the example I gave in my question did not work as it's in all the answers on magento.stackexchange and is also what is outlined in the docs at lib/web/css/docs/dropdowns.html

The parent li of the dropdown link needs to have a class of links-container which I discovered just by looking through the Magento core by trial and error.

The dropdown menu opens on click only, next I would like to be able to change it to open on hover, I think I need to extend lib/web/mage/dropdowns.js for that.

UPDATE

I figured out why it wasn't working with the example in the docs, it was just that the CSS wasn't added to the HTML class example-dropdown-2 but the actual JavaScript is working. If you look at the HTML in the browser inspector you can see that the class active is added to the ul etc. For instance when you log in the the customer menu dropdown has this CSS

.customer-welcome .customer-menu {
 display: none;
}

And .example-dropdown-2 .dropdown does not. So you have to add your own CSS to hide & display the dropdown etc, or use the example I gave in my answer above which already has CSS if your theme inherits from the Luma them (maybe it's the same for the blank theme).

Shame, it's actually a really simple solution if the docs had been clearer it would have saved a lot of time. Although I should have spotted why it wasn't working sooner.

• Joel Davey: This answer does not correctly explain an answer to the question you had.
• Holly: fair point, It's an old answer. I just updated it with the link to the docs.

Answer 2

The widget is initialised correctly your missing .lib-dropdown() in your theme's less, in your example the minimum less would be

.example-dropdown-2 {
 .lib-dropdown();
}

Look at the docs on lib-dropdown for info on the paremeters, by default it generates css for the .action.toggle and ul.dropdown sibling classes as per your example html

Answer 3

Add This code into your phtml file

<ul>
 <li class="customer-welcome">
 <span
 role="link"
 tabindex="0"
 data-mage-init='{"dropdown":{}}'
 data-toggle="dropdown"
 data-trigger-keypress-button="true"
 >
 <a
 class="action dwsswitch"
 tabindex="-1"
 data-action="customer-menu-toggle">
 <span><?= $block->escapeHtml(__('You Menu Here')) ?></span>
 </a>
 </a>
 </span>
 <div data-target="dropdown">
 <ul class="header links">
 <li><a href="">Link 1</a></li>
 <li><a href="#">Link 2</a></li>
 </ul>
 </div>
 </li>
</ul>
<style type="text/css">
 .customer-welcome .action.dwsswitch:after {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 font-size: 10px;
 line-height: 22px;
 color: inherit;
 content: '\e622';
 font-family: 'luma-icons';
 margin: 0;
 vertical-align: top;
 display: inline-block;
 font-weight: normal;
 overflow: hidden;
 speak: none;
 text-align: center;
}
.customer-welcome.active .action.dwsswitch:after {
 content: '\e621';
}
</style>

I Hope This Helps You.