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:
Programmatic Solution to Add Custom Menu in Magento 2 Frontend
Method 1:
- You have to create a plugin. Create di.xml at [vendor]/[extension]/etc/frontend/12345678<?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>
- Create Topmenu.php at [vendor]/[extension]/Plugin/12345678910111213141516171819202122232425262728293031323334353637383940<?phpnamespace [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 menureturn ['name' => __($name),'id' => $id,'url' => $url,'has_active' => false,'is_active' => false,];}}
Method 2:
- Create events.xml file at [vendor]/[extension]/etc/frontend1234567<?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>
- Now create Topmenu.php file at [vendor]/[extension]/Observer1234567891011121314151617181920212223242526<?phpnamespace [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.
Get Weekly Updates
Never miss Magento tips, tricks, tutorials, and news.
Thank you for subscribing.
Something went wrong.