Magento 2 jquery menu/nav widgets

Question

I'm trying to utilize the menu or nav jQuery widget that comes with Magento 2 based on what I'm trying to accomplish. A secondary navigation section that will live on a sidebar element. It's just a vertical nav, nothing fancy - no ajax or actual calls for data. Just a list of links that needs to collapse for screen real estate's sake.

It is my understanding that I am going to have to style them, and for time's sake I'd prefer to utilize whatever will be responsive and require the most minimal styling on my part.

For the life of me I'm unable to get the jQuery to work on page. If someone could shoot me an implementation that is working as a vertical nav that will still render as something usable responsively I'd be forever grateful!

I'm open to pulling in outside js libraries, if that's the easiest solution.

Answer 1

Magento 2 comes built in with the jQuery UI Menu Widget that is very poorly documented in the Magento Docs. So there is no need to pull in a 3rd party solution. The issue with this one is the lack of examples in the core code. The default jQuery implementation doesn't actually work on Magento, it kicks an error because the dom is not structured in a way that the JS can find the elements it needs.

So i had to play around with it for a while before i was able to get it working. But it's a pretty slick solution once you get it right.

<nav class="navigation" data-action="navigation">
    <ul id="menu" data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left+10 top+30"}}}'>
        <li class="ui-state-disabled ui-menu-item"><div>Toys (n/a)</div></li>
        <li class="ui-menu-item"><div>Books</div></li>
        <li class="ui-menu-item"><div>Clothing</div></li>
        <li class="ui-menu-item""><div>Electronics</div>
            <ul>
                <li class="ui-state-disabled"><div>Home Entertainment</div></li>
                <li><div>Car Hifi</div></li>
                <li><div>Utilities</div></li>
            </ul>
        </li>
        <li class="ui-menu-item"><div>Movies</div></li>
        <li class="ui-menu-item"><div>Music</div>
            <ul>
                <li><div>Rock</div>
                    <ul>
                        <li><div>Alternative</div></li>
                        <li><div>Classic</div></li>
                    </ul>
                </li>
                <li><div>Jazz</div>
                    <ul>
                        <li><div>Freejazz</div></li>
                        <li><div>Big Band</div></li>
                        <li><div>Modern</div></li>
                    </ul>
                </li>
                <li><div>Pop</div></li>
            </ul>
        </li>
        <li class="ui-state-disabled ui-menu-item"><div>Specials (n/a)</div></li>
    </ul>
</nav>

I have pulled the example code from the jQuery site and adapted it to work with Magento 2. The whole thing is kicked off by the data-mage-init in the main ul:

data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left+10 top+30"}}}'

This is what sets up and init the JS system to create the menu. You can play around with the settings, paying special mind to the position section. This is where you will set the default layout of the menu. Right now it's set up for a sidebar menu where the hover expands to the right of the main menu item.

Also take note that the class names are essential for this to work. Without class="ui-menu-item" in the top level elements the menu will not set default values correctly. Of course there is a lot more you can do with this, but it's a start. Looking at the main menu on the site will also get you some ideas on how Magento created theirs.

For more digging around, you can see this core file:

lib/web/mage/menu.js