Search code examples
magentomagento2

Magento 2 menu widget

I have some trouble with the native Magento menu widget - https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/widgets/widget_menu.html

For example, I've copied this code from devdocs and past into the .phtml file:

<nav class="navigation" data-action="navigation">
    <ul id="menu" data-mage-init='{"menu":{"responsive":true, "expanded":true, "delay": 200, "position":{"my":"left top","at":"left+10 top+30"}}}'>
        <li class="level0 level-top ui-menu-item">Toys</li>
        <li class="level0 level-top parent ui-menu-item">Electronics
            <ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all">
                <li class="ui-menu-item"><a href="#">Home Entertainment</a></li>
                <li class="ui-menu-item"><a href="#">Routers</a></li>
            </ul>
        </li>
        <li class="level0 level-top ui-menu-item">Music
            <ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all">
                <li class="ui-menu-item">
                    <a href="#">Alternative</a>
                </li>
                <li class="ui-menu-item">
                    <a href="#">Classic</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Menu widget works on the site but did it not properly. When the page is loading and I tried to open the 2nd level menu (.submenu) by hover on the top-level menu, it's not working by the first hover, only the second time, and all following.

Maybe I'm skipping some js initialization or something like that?

Solution

  • In the devdoc this code is just an example, it doesn't work at all to initialize the menu. You need to add js and css code to make it work as expected.