0

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.

2
  • 1
    please define what exactly a "mega menu" is? Jun 22, 2015 at 9:04
  • @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. Jun 22, 2015 at 12:40

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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