enter image description here

The above image is of top-links. I wanted to add a drop-down for My Account. When the user click or hover on it, My Account should show My account option For example orders.

2 Answers 2


Create phtml template file

<div class="customer-menu">
 <span class="action toggle"  data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true">
     <span class="title"><?= __("Customer Menu"); ?></span>
 <ul class="dropdown">
     <?= $block->getChildHtml() ?>

Call block out in XML where you want

 <block class="Magento\Framework\View\Element\Template" name="header-dropdown" template="Custom_Module::header-dropdown.phtml"/>

Add design into less file

.customer-menu {

Move your links into dropdown with xml (example: my account link)

 <move element="my-account-link" destination="header-dropdown" />
  • This Works very well but there is a problem. The page should be completely loaded otherwise it give an error a javascript error. Uncaught TypeError: Cannot read property 'setAttribute' of undefined
    – Avesh Naik
    Jun 1, 2018 at 7:56
  • Could you give more info about that error? I'm working on Blank theme and can't get that error.
    – K-s
    Jun 1, 2018 at 8:44
  • See my answer...
    – Avesh Naik
    Jun 1, 2018 at 8:52

Try to make a static block with the links in it that you want in them. Echo the static block using a .phtml or .xml file while assigning a class to it. Style the block to your wishes and set it to display: none in your CSS. Then, when a user hovers over your link, set it to display: block using Javascript (or use .show() in combination with jQuery).

Hopefully this may get you on the right tracks. The pro of using a static block is that you can easily edit the content in the drop down menu via the admin panel.

  • Can't we do it using magento way?
    – Avesh Naik
    May 31, 2018 at 13:55

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .