Magento2 - how to show custom menu in top menu?

Question

I need to show only first level categories and their products on top menu to replace Magento's default top menu.

For example categories and products should display like:

Tshirts
   Polo Tshirts  Price:$10.00
   Polo Tshirts Green  Price:$10.00
   Polo Tshirts Yellow Price:$10.00

Shirts
   Polo shirts  Price:$10.00
   Polo Tshirts Green  Price:$10.00
   Polo Tshirts Yellow Price:$10.00

How to get the product collection in topmenu blocks?

Answer 1

Try this way:

1) Menu content in M2 is generated from Block - vendor/magento/module-theme/Block/Html/Topmenu.php

2) To make changes in HTML structure, we need to override the Block in our custom Package Module say app/code/Mypackage/Mymodule/Block/Html/Topmenu.php

3) Sample code to override

namespace Mypackage\Mymodule\Block\Html;

class Topmenu extends \Magento\Theme\Block\Html\Topmenu

{

// your code to get first level categories

}

4) Override above file through app/code/Mypackage/Mymodule/etc/di.xml

5) Make desired changes in the HTML of Menu and css as needed.