🍽️Menu: Toggle dropdown on whole menu item

If you want to open sub menu not only but clicking on toggle button but on a whole menu item you need to make the next customization.

Just add the code piece below to the 📂 /assets/js/src/navigation.js file.

/**
 * Initializes submenu toggling functionality for menu items with the class '.menu-item--has-toggle > a'
 * when the DOM content is fully loaded.
 *
 * This function selects all menu items with the specified class, adds a click event listener to each,
 * prevents the default action of following the href="#" link, toggles the submenu of the clicked menu item's parent node,
 * and logs "test" to the console on each click event.
 */
document.addEventListener('DOMContentLoaded', function() {
    // Select all menu items with the class .menu-item--has-toggle > a
    const menuItems = document.querySelectorAll('.menu-item--has-toggle > a');

    // Add event listener to each menu item
    menuItems.forEach((item) => {
        item.addEventListener('click', function(e) {
            e.preventDefault(); // Prevents the default action (e.g., following the href="#" link)
            toggleSubMenu(item.parentNode); // Toggle submenu of the clicked menu item's parent node
        });
    });
});

Last updated