Main frontend menu generation in Magento 2

May 12, 2016 - E-Commerce, Fire development, Magento 2

Magento 2 Development
If you are familiar with Magento 1.x menu generation, you will be surprised how similar is the appropriate Magento 2 process. There are 9 steps of menu generation.

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml#L18

?>
 <?php
 /**
 * Top menu for store
 *
 * @see \Magento\Theme\Block\Html\Topmenu
 */
 ?>
 <?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
 <?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

 <nav class="navigation" role="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php /* @escapeNotVerified */ echo $_menu; ?>
    </ul>
 </nav>

<?php

/**

* Top menu for store

* @see \Magento\Theme\Block\Html\Topmenu

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>

<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<?php /* @escapeNotVerified */ echo $_menu; ?>

</ul>

</nav>

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Theme/Block/Html/Topmenu.php#L72-L75

$this->_eventManager->dispatch(
    'page_block_html_topmenu_gethtml_before',
    ['menu' => $this->_menu, 'block' => $this]
);

$this->_eventManager->dispatch(

'page_block_html_topmenu_gethtml_before',

['menu' => $this->_menu, 'block' => $this]

);

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Observer/AddCatalogToTopmenuItemsObserver.php#L54

/**
  * Checking whether the using static urls in WYSIWYG allowed event
  *
  * @param \Magento\Framework\Event\Observer $observer
  * @return void
  */
public function execute(\Magento\Framework\Event\Observer $observer)
 {
    $block = $observer->getEvent()->getBlock();
    $block->addIdentity(\Magento\Catalog\Model\Category::CACHE_TAG);
    $this->_addCategoriesToMenu($this->catalogCategory->getStoreCategories(), $observer->getMenu(), $block);
}

/**
  * Recursively adds categories to top menu
  *
  * @param \Magento\Framework\Data\Tree\Node\Collection|array $categories
  * @param \Magento\Framework\Data\Tree\Node $parentCategoryNode
  * @param \Magento\Theme\Block\Html\Topmenu $block
  * @return void
  */

/**

* Checking whether the using static urls in WYSIWYG allowed event

* @param \Magento\Framework\Event\Observer $observer

* @return void

public function execute(\Magento\Framework\Event\Observer $observer)

{

$block = $observer->getEvent()->getBlock();

$block->addIdentity(\Magento\Catalog\Model\Category::CACHE_TAG);

$this->_addCategoriesToMenu($this->catalogCategory->getStoreCategories(), $observer->getMenu(), $block);

}

/**

* Recursively adds categories to top menu

* @param \Magento\Framework\Data\Tree\Node\Collection|array $categories

* @param \Magento\Framework\Data\Tree\Node $parentCategoryNode

* @param \Magento\Theme\Block\Html\Topmenu $block

* @return void

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Helper/Category.php#L115

        return [];
    }

    $recursionLevel = max(
        0,
        (int)$this->scopeConfig->getValue(
            'catalog/navigation/max_depth',
            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
        )
    );
    $storeCategories = $category->getCategories($parent, $recursionLevel, $sorted, $asCollection, $toLoad);

    $this->_storeCategories[$cacheKey] = $storeCategories;
    return $storeCategories;
}

/**
  * Retrieve category url
  *
  * @param ModelCategory $category
  * @return string

return [];

}

$recursionLevel = max(

(int)$this->scopeConfig->getValue(

'catalog/navigation/max_depth',

\Magento\Store\Model\ScopeInterface::SCOPE_STORE

)

);

$storeCategories = $category->getCategories($parent, $recursionLevel, $sorted, $asCollection, $toLoad);

$this->_storeCategories[$cacheKey] = $storeCategories;

return $storeCategories;

}

/**

* Retrieve category url

* @param ModelCategory $category

* @return string

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Model/Category.php#L947

*
 * @param int $parent
 * @param int $recursionLevel
 * @param bool $sorted
 * @param bool $asCollection
 * @param bool $toLoad
 * @return \Magento\Framework\Data\Tree\Node\Collection|\Magento\Catalog\Model\ResourceModel\Category\Collection
 */
public function getCategories($parent, $recursionLevel = 0, $sorted = false, $asCollection = false, $toLoad = true)
 {
    $categories = $this->getResource()->getCategories($parent, $recursionLevel, $sorted, $asCollection, $toLoad);
    return $categories;
}

/**
  * Return parent categories of current category
  *
  * @return \Magento\Framework\DataObject[]|\Magento\Catalog\Model\Category[]
  */
public function getParentCategories()
 {

* @param int $parent

* @param int $recursionLevel

* @param bool $sorted

* @param bool $asCollection

* @param bool $toLoad

* @return \Magento\Framework\Data\Tree\Node\Collection|\Magento\Catalog\Model\ResourceModel\Category\Collection

public function getCategories($parent, $recursionLevel = 0, $sorted = false, $asCollection = false, $toLoad = true)

{

$categories = $this->getResource()->getCategories($parent, $recursionLevel, $sorted, $asCollection, $toLoad);

return $categories;

}

/**

* Return parent categories of current category

* @return \Magento\Framework\DataObject[]|\Magento\Catalog\Model\Category[]

public function getParentCategories()

{

magento/magento2/blob/22629abe10f9c640fe47b6081d57fedccdea8e0f/app/code/Magento/Catalog/Model/ResourceModel/Category.php#L628-L640

public function getCategories($parent, $recursionLevel = 0, $sorted = false, $asCollection = false, $toLoad = true)
 {
    $tree = $this->_categoryTreeFactory->create();
    /* @var $tree \Magento\Catalog\Model\ResourceModel\Category\Tree */
    $nodes = $tree->loadNode($parent)->loadChildren($recursionLevel)->getChildren();

    $tree->addCollectionData(null, $sorted, $parent, $toLoad, true);

    if ($asCollection) {
        return $tree->getCollection();
    }
    return $nodes;
}

public function getCategories($parent, $recursionLevel = 0, $sorted = false, $asCollection = false, $toLoad = true)

{

$tree = $this->_categoryTreeFactory->create();

/* @var $tree \Magento\Catalog\Model\ResourceModel\Category\Tree */

$nodes = $tree->loadNode($parent)->loadChildren($recursionLevel)->getChildren();

$tree->addCollectionData(null, $sorted, $parent, $toLoad, true);

if ($asCollection) {

return $tree->getCollection();

}

return $nodes;

}

magento/magento2/blob/487f5f45/app/code/Magento/Theme/view/frontend/requirejs-config.js#L27-L27

"menu":                   "mage/menu",

1	"menu": "mage/menu",

magento/magento2/blob/487f5f45/app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml#L21-L24

<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
    <?php /* @escapeNotVerified */ echo $_menu; ?>
    <?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>
</ul>

<?php /* @escapeNotVerified */ echo $_menu; ?>

<?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?>

</ul>

magento/magento2/blob/487f5f45/lib/web/mage/menu.js#L14-L17

/**
  * Menu Widget - this widget is a wrapper for the jQuery UI Menu
  */
$.widget('mage.menu', $.ui.menu, {

/**

* Menu Widget - this widget is a wrapper for the jQuery UI Menu

$.widget('mage.menu', $.ui.menu, {

magento/magento2/blob/487f5f45/lib/web/jquery/jquery-ui.js#L11439-L11439

$.widget( "ui.menu", {

1	$.widget( "ui.menu", {

Source

More tips from Magento 2 cookbook

Post Tags:magento 2 Magento 2 Developer’s Cookbook Main frontend menu

← Previous Post Next Post →

Magento SEO in 2026: Proven Strategies to Rank Higher and Boost Sales (50+ Tips)

Magento SEO is the backbone of every thriving Magento 2 store — it’s the key to attracting customers organically without… Read more…
Magento 2 Developer Guide & Cookbook: Essential Code Snippets, Tips, and User Notes

Working with Magento 2 often means juggling dozens of tasks — from managing catalogs to customizing checkout flows — and… Read more…
Magento Accounting Integration: How to Connect Magento 2 to Any Accounting Software in 2025

Managing a Magento 2 store isn’t only about products and customers — it’s also about keeping finances accurate, taxes compliant,… Read more…
Magento CRM Integration Guide — How to Connect Magento 2 to Any CRM in 2025

Managing customer relationships effectively is just as important as managing inventory or orders — and that’s where Magento CRM integration… Read more…
The Complete Magento ERP Integration Guide: How to Connect Magento 2 to Any ERP System in 2025

Magento ERP integration is no longer a luxury for growing online stores — it’s the backbone of a streamlined, data-driven… Read more…
Magento Marketplace Integration: How to Connect Magento 2 to Any Online Marketplace

Managing a Magento store is more than just listing products — it’s about reaching customers wherever they shop. That’s where… Read more…
How to Import & Export Newsletter Subscribers in Magento 2: Complete Guide for Bulk Email List Management in 2025

Managing your Magento 2 newsletter subscribers is a vital part of keeping your email marketing effective and your customer base… Read more…
Magento 2 Shipping Tracking Guide: How to Import & Export Order Tracking Numbers

Managing Magento shipping tracking is one of the most important parts of providing a smooth post-purchase experience. Customers expect real-time… Read more…
Magento 2 XML Integration Guide 2025: How to Import Magento 2 Products from XML Feed & Export Them Back as XML (+Other Entities)

Working with supplier catalogs, marketplace integrations, or ERP systems often means handling XML data, yet Magento 2 does not natively… Read more…
Magento 2 Gift Cards Guide 2025: Management Tips + Import & Export Tutorials

Magento 2 gift cards aren’t just seasonal perks — they’re a powerful sales tool used by online grocery stores, fashion… Read more…
Magento 2 Product Reviews Import & Export Guide: Streamline Your Workflow and Boost Store Credibility

Magento 2 product reviews are more than just comments — they’re a trust signal, an SEO asset, and a conversion… Read more…
Magento 2 URL Rewrites Guide: How to Import, Export & Manage SEO-Friendly URLs Like a Pro

Struggling to manage SEO-friendly URLs in Magento 2? That’s where the Magento 2 URL rewrites come into play. While the… Read more…
Magento 2 CMS Page Hierarchy: How to Manage Parent-Child Pages Like a Pro + Import & Export Guide

Need to structure static content in Magento 2? That’s where the Magento 2 CMS page hierarchy comes into play. Exclusive… Read more…
Magento 2 Search Terms & Synonyms: Full Guide to Import, Export & Optimization

Need to take control of how customers search your Magento 2 store? Let’s talk about two powerful — yet often… Read more…
Mastering Magento 2 Upsell Products: Setup, Management, Import & Export Guide

Magento 2 upsell products are a powerful way to increase order value by guiding customers toward higher-end or upgraded versions… Read more…
Magento 2 Cross-Sell Products Guide: Manual Setup, Bulk Import & Cart Optimization Tips

Magento 2 cross-sell products are one of the most effective tools for increasing impulse purchases and boosting revenue right at… Read more…
Get Magento 2 Related Products Working: Manual Setup & Bulk Import Guide

Magento related products are a powerful way to guide your customers toward additional purchases and increase the average order value… Read more…
B2B add-on of Improved Import & Export Extension Change Log

The B2B add-on is an additional module that works with the Improved Import and Export extension for Magento 2. It… Read more…
How to Use B2B Shared Catalogs in Magento 2: Full Guide with Import & Export Tips

Shared catalog Magento 2 functionality is one of Adobe Commerce’s most powerful B2B tools — and yet, it’s often underutilized.… Read more…
Magento 2 B2B Requisition List Guide: Management, Optimization, Import & Export Explained

Magento 2 B2B requisition list functionality is a game-changer for streamlining repeat orders and simplifying bulk purchasing. In this guide,… Read more…

Related posts