How to create Mega Menu in magento

Question

I need to create mega menu in magento. basically i m not familiar with designing theme.So i m confused about to how to create mega menu in magento. I have a html theme. Mega menu here you can see menu which i want to use...in magento... I need to know the easy way to create mega menu.

• Andrew Kett: please define what exactly a "mega menu" is?
• brianwalleshauser: @andrewkett a mega menu is a large dropdown menu that spans the entire width of the screen. As you can see in his image, you're able to basically have numerous links to various areas of a website all under one dropdown panel.

Answer 1

2 ways to do this:

1. Remove 'catalog.topnav' from Block 'store.menu' and add your own custom topnav block, In the block you will want to add your logic on how you want your mega menu build
2. Create helper class in Vendor/Module/Helper/Data.php, in this class build your architecure the way you want it then, simply override the template for 'catalog.topnav' like so:

<referenceBlock name="catalog.topnav">
 <arguments>
 <action method="setTemplate">
 <argument name="template" xsi:type="string">Infinri_MegaMenu::topmenu.phtml</argument>
 </action>
 </arguments>
</referenceBlock>

then set up your template as needed ex:

<?php declare(strict_types=1);
use Magento\Theme\Block\Html\Topmenu;
/**
 * Custom Top Menu template for Mega Menu
 *
 * @var $block Topmenu
 */
// Fetch categories using your custom helper
$helper = $this->helper('Infinri\MegaMenu\Helper\Data');
$categories = $helper->getFormattedCategories();
// Core menu rendering logic
$menuTree = $block->getMenu(); // Use if/as needed
?>
<nav class="navigation" data-action="navigation">
 <ul class="menu" data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
 <?php foreach ($categories as $category): ?>
 <li class="level0 nav-item">
 <a href="<?= $block->escapeUrl($category['url']) ?>" class="level0">
 <?= $block->escapeHtml($category['name']) ?>
 </a>
 <?php if (!empty($category['children'])): ?>
 <ul class="level0 submenu">
 <?php foreach ($category['children'] as $childCategory): ?>
 <li class="level1">
 <a href="<?= $block->escapeUrl($childCategory['url']) ?>" class="level1">
 <?= $block->escapeHtml($childCategory['name']) ?>
 </a>
 <!-- Add deeper levels here if necessary -->
 </li>
 <?php endforeach; ?>
 </ul>
 <?php endif; ?>
 </li>
 <?php endforeach; ?>
 <?= /* @noEscape */ $block->getChildHtml() ?>
 </ul>
</nav>