How to Add Custom Menu Item in Magento 2 Frontend

Navigation menu in a store eases the navigation of the store from one location to another. It directs website visitors to find products and services easily without wasting time.

By default, Magento 2 generates the menu link while adding the category and enabling “Include in Menu” option of the category. But what if you require to add custom menu item in Magento 2 frontend rather than category links for website users to easily locate the link of an important page or form?

For example, you require to show user information of the logged in customers under the page named “My Profile”. To easily highlight and find the link, you require to add custom menu item in Magento 2 frontend for customers to click and open the profile information.  

There are two separate methods to add custom menu item in Magento 2 frontend:

1. Using Plugin
2. Using Event and Observer

Programmatic Solution to Add Custom Menu in Magento 2 Frontend

Method 1: Add Custom Menu in Magento 2 Frontend Using Plugin

1. You have to create a plugin. Create di.xml at [vendor]/[extension]/etc/frontend/
   
   <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Theme\Block\Html\Topmenu"> <plugin name="custom_menu_item" type="[vendor]\[extension]\Plugin\Topmenu" sortOrder="10" disabled="false"/> </type> </config>

   1 2 3 4 5 6 7 8

   <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">     <type name="Magento\Theme\Block\Html\Topmenu">         <plugin name="custom_menu_item" type="[vendor]\[extension]\Plugin\Topmenu" sortOrder="10"                 disabled="false"/>     </type> </config>

2. Create Topmenu.php at [vendor]/[extension]/Plugin/
   
   <?php namespace [vendor]\[extension]\Plugin; use Magento\Framework\Data\Tree\NodeFactory; use Magento\Framework\UrlInterface; class Topmenu { protected $nodeFactory; protected $urlBuilder; public function __construct(NodeFactory $nodeFactory, UrlInterface $urlBuilder) { $this->nodeFactory = $nodeFactory; $this->urlBuilder = $urlBuilder; } public function beforeGetHtml(\Magento\Theme\Block\Html\Topmenu $subject, $outermostClass = '', $childrenWrapClass = '', $limit = 0) { $menuNode = $this->nodeFactory->create(['data' => $this->getNodeAsArray("Profile", "mnuMain"), 'idField' => 'id', 'tree' => $subject->getMenu()->getTree(),]); $menuNode->addChild($this->nodeFactory->create(['data' => $this->getNodeAsArray("MainMenu", "mnuMyMenu"), 'idField' => 'id', 'tree' => $subject->getMenu()->getTree(),])); $subject->getMenu()->addChild($menuNode); } protected function getNodeAsArray($name, $id) { $url = $this->urlBuilder->getUrl("/" . $id); //here you can add url as per your choice of menu return ['name' => __($name), 'id' => $id, 'url' => $url, 'has_active' => false, 'is_active' => false,]; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

   <?php   namespace [vendor]\[extension]\Plugin;     use Magento\Framework\Data\Tree\NodeFactory;     use Magento\Framework\UrlInterface;       class   Topmenu     {         protected $nodeFactory;         protected $urlBuilder;           public function __construct(NodeFactory $nodeFactory, UrlInterface $urlBuilder)         {             $this->nodeFactory = $nodeFactory;             $this->urlBuilder = $urlBuilder;         }           public function beforeGetHtml(\Magento\Theme\Block\Html\Topmenu $subject, $outermostClass = '', $childrenWrapClass = '', $limit = 0)         {             $menuNode = $this->nodeFactory->create(['data' => $this->getNodeAsArray("Profile", "mnuMain"),                 'idField' => 'id',                 'tree' => $subject->getMenu()->getTree(),]);             $menuNode->addChild($this->nodeFactory->create(['data' => $this->getNodeAsArray("MainMenu", "mnuMyMenu"),                 'idField' => 'id',                 'tree' => $subject->getMenu()->getTree(),]));               $subject->getMenu()->addChild($menuNode);           }           protected function getNodeAsArray($name, $id)         {             $url = $this->urlBuilder->getUrl("/" . $id); //here you can add url as per your choice of menu             return ['name' => __($name),                 'id' => $id,                 'url' => $url,                 'has_active' => false,                 'is_active' => false,];         }     }

Method 2: Add Custom Menu in Magento 2 Frontend Using Event and Observer

1. Create events.xml file at [vendor]/[extension]/etc/frontend
   
   <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"> <event name="page_block_html_topmenu_gethtml_before"> <observer name="Meetanshi_CustomerProfile_observer" instance="[vendor]\[extension]\Observer\Topmenu"/> </event> </config>

   1 2 3 4 5 6 7

   <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"         xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">     <event name="page_block_html_topmenu_gethtml_before">         <observer name="Meetanshi_CustomerProfile_observer" instance="[vendor]\[extension]\Observer\Topmenu"/>     </event> </config>

2. Now create Topmenu.php  file at [vendor]/[extension]/Observer
   
   <?php namespace [vendor]\[extension]\Observer; use Magento\Framework\Event\Observer as EventObserver; use Magento\Framework\Data\Tree\Node; use Magento\Framework\Event\ObserverInterface; class Topmenu implements ObserverInterface { public function __construct() { } public function execute(EventObserver $observer) { $menu = $observer->getMenu(); $tree = $menu->getTree(); $data = ['name' => __('MyMenu'), 'id' => 'some-unique-id-here', 'url' => 'url goes here', 'is_active' => false]; $node = new Node($data, 'id', $tree, $menu); $menu->addChild($node); return $this; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

   <?php   namespace [vendor]\[extension]\Observer;     use Magento\Framework\Event\Observer as EventObserver;     use Magento\Framework\Data\Tree\Node;     use Magento\Framework\Event\ObserverInterface;       class Topmenu implements ObserverInterface     {         public function __construct()         {         }           public function execute(EventObserver $observer)         {             $menu = $observer->getMenu();             $tree = $menu->getTree();             $data = ['name' => __('MyMenu'),                 'id' => 'some-unique-id-here',                 'url' => 'url goes here',                 'is_active' => false];             $node = new Node($data, 'id', $tree, $menu);             $menu->addChild($node);             return $this;         }     }

That’s it. Once you implement one of the above methods to add custom menu item, you can see the menu item added in the Magento 2 frontend.

If you have queries, feel free to ask in the Comment section below.

I would be happy to answer.

Please do consider sharing this post with Magento Community via social media.

Thank you.