How to initialize a navigation menu in Magento 2?

The Magento menu widget is a customized version of the jQuery UI Menu widget. It adds the following functionality:

1. expanding all layers of the menu tree past the second layer;

2. responsive menu;

3. hover delay.

The Magento menu widget source is lib/web/mage/menu.js.

→ For more details about how to initialize a widget, check the official Magento guide. 

Warning: all code snippets in this article are examples and require customization according to your business needs.

The menu widget options are the same as the jQuery UI Menu widget options, with some  customizable settings:

• delay is used to set the duration of the submenu opening delay.

• showDelay sets the duration of the menu display delay. Used in the widget toggle method.

• hideDelay allows you to configure the duration of the menu closing delay. Used in the widget toggle method.

• responsive is used to configure the default responsive handler for the navigation widget.

• expanded shows top-level navigation items in the mobile menu or all the items.

• mediaBreakpoint defines the width of the user's window in pixels for which the menu switches between mobile and desktop view.

Additional available methods:

• toggle () toggles the open state of the website menu.

• isExpanded () adds a class for the expanded option.

How to initialize the Magento 2 dropdown menu?

To initialize the widget and pass options, you need to use declarative notation with the data-mage-init attribute. Here is an example:

<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>

As a result, you will get a menu with the child items on the frontend: 

You can ease the process of setting and editing a navigation menu in Magento 2 with the Mega Menu extension. ?ustomize the menu using the suggested color schemes and your background images. This extension will optimize the Magento 2 top menu for mobile devices thanks to the automatic mobile menu breakpoint. The process of creating a dropdown menu with this extension will take 3 minutes. Watch our video to see the process from scratch:

You can also check our guide on how to create a custom navigation menu.