I want to create a different menu for a new theme with different html structure.


I have found the solution so I am answering it.

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

  • 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

    Sample code to override

    namespace Mypackage\Mymodule\Block\Html;
    class Topmenu extends \Magento\Theme\Block\Html\Topmenu
        // your custom methods
  • Override above file through app/code/Mypackage/Mymodule/etc/di.xml:

    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
        <preference for="Magento\Theme\Block\Html\Topmenu" type="Mypackage\Mymodule\Block\Html\Topmenu" />
  • Make desired changes in the HTML of Menu and css as needed.

| improve this answer | |
  • 1
    Could you explain what goes into the di.xml ? – Stephen Dance May 18 '18 at 15:19

Not the answer you're looking for? Browse other questions tagged or ask your own question.