Customising the Magento 2 main navigation (topmenu) javaScript

Question

I've spent a fair while digging into the theme module and blank templates trying to make changes to the main Magento2 navigation. So far I've made a custom module to control the content rendered into the page (Adding links to subnav) but I can't work out where the navigation menu javaScript is.

I can see a navigation.menu.js file in the blank template and a menu.js in the theme module but neither of these seem to be for the main menu and I can't find any other places to look for the JS.

Because the block is generated by XML and the navigation seems to run on jQuery UI I don't have much I can use to search for. Up until now I've mainly been modifying a custom template thats built on the base template by searching the vendor directory but I'm coming up blank.

I'm running Magento 2.1 with a custom template built off the base template, If anyone could point me in the right direction it would be as great help.

Edit1:

So after more googling and testing I finally found a second menu.js file in lib/web/mage which seems to be the right place, however now I"m unable to override it.

With my new information i actually stumbled across the Magento2 dev docs which has an example on overriding the menu and admin menus. So I added the following to my module

Namespace/Module/view/frontend/require-config.js

var config = {
    map: {
        '*': {
            'menu': 'Test_Topmenu/js/navigation-menu'
        }
    }
};

Namespace/Module/view/frontend/web/js/navigation-menu.js

define([
    'jquery',
    'jquery/ui',
    'mage/menu'
], function ($) {
    "use strict";
    $.widget('Test_Topmenu.navigationMenu', $.mage.menu, {
        _init: function () {
            console.log('new init');
        }
    });
    return $.Test_Topmenu.navigationMenu;
});

Now looking in the vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml file I can see that they have used a data-mage-init of the menu widget. As I understand it this should use the modified version of the file, however it doesn't seem to be working. I added a console log to the default init and have tried numerous connotations of cases and namespaces to make sure I wasn't setting these up wrong (I've seen a lot of examples but people tend to just use or not in other places), but I'm unable to get the new init to be called.

I have also been emptying the pub/static/frontend directory and redeploying after every change as well to make sure only the correct versions could be getting called.

Answer 1

If you want to override the navigation-menu.js you need to add it in your theme:

app/design/frontend/{yourVendorName}/{yourThemeName}/web/js/navigation-menu.js

After that you need to run:

php bin/magento setup:static-content:deploy

and clear the cache, just to be sure.

I hope this helps!