How can I add dropdown menu

Question

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.

Answer 1

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>
 </span>
 <ul class="dropdown">
 <?= $block->getChildHtml() ?>
 </ul>
</div>

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 {
 .lib-dropdown();
}

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

 <move element="my-account-link" destination="header-dropdown" />

• Avesh Naik: 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
• K-s: Could you give more info about that error? I'm working on Blank theme and can't get that error.
• Avesh Naik: See my answer...

Answer 2

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.

• Avesh Naik: Can't we do it using magento way?