As we know Magento 2 does not include features like adding extra(home, blog) links to main navigation menu. In this blog post we will discuss how to add non category links to navigation menu in Magento 2. In this we will use Magento 2 Observer page_block_html_topmenu_gethtml_before to add new link to menu.<\/p>\n
Lets consider module with Namespace is Hiddentechies and Module Name is NavLinks. Lets list down all the files require for this extension.<\/p>\n
– registration.php
\n– composer.json
\n– etc\/module.xml
\n– etc\/frontend\/events.xml
\n– Observer\/Topmenu.php<\/p>\n
First we will create registration file at app\/code\/Hiddentechies\/NavLinks\/registration.php file<\/p>\n
<?php\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\r\n \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\r\n 'Hiddentechies_NavLinks',\r\n __DIR__\r\n);<\/pre>\nNow, create a composer.json file in app\/code\/Hiddentechies\/NavLinks\/ folder as per below.<\/p>\n
<?php\r\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\r\n \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\r\n 'Hiddentechies_NavLinks',\r\n __DIR__\r\n);\r\n\r\n{\r\n \"name\": \"hiddentechies\/navlinks\",\r\n \"description\": \"N\/A\",\r\n \"require\": {\r\n \"php\": \"~5.5.0|~5.6.0|~7.0.0\"\r\n },\r\n \"type\": \"magento2-module\",\r\n \"version\": \"1.0.2\",\r\n \"authors\": [\r\n {\r\n \"name\": \"Hiddentechies\",\r\n \"email\": \"admin@Hiddentechies.com\",\r\n \"homepage\": \"https:\/\/www.Hiddentechies.com\/\",\r\n \"role\": \"Developer\"\r\n }\r\n ],\r\n \"autoload\": {\r\n \"files\": [\r\n \"registration.php\"\r\n ],\r\n \"psr-4\": {\r\n \"Hiddentechies\\\\NavLinks\\\\\": \"\"\r\n }\r\n }\r\n}<\/pre>\nnow create module.xml file in app\/code\/Hiddentechies\/NavLinks\/etc<\/p>\n
<?xml version=\"1.0\"?>\r\n \r\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/Module\/etc\/module.xsd\">\r\n <module name=\"Hiddentechies_NavLinks\" setup_version=\"1.0.0\">\r\n <\/module>\r\n<\/config><\/pre>\nnow create events.xml file in app\/code\/Hiddentechies\/NavLinks\/etc\/frontend<\/p>\n
<?xml version=\"1.0\"?>\r\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Event\/etc\/events.xsd\">\r\n <event name=\"page_block_html_topmenu_gethtml_before\">\r\n <observer name=\"hiddentechies_navlinks_observer\" instance=\"Hiddentechies\\NavLinks\\Observer\\Topmenu\" \/>\r\n <\/event>\r\n<\/config><\/pre>\nNow we will create Observer\/Topmenu.php file.<\/p>\n
<?php\r\nnamespace Hiddentechies\\NavLinks\\Observer;\r\nuse Magento\\Framework\\Event\\Observer as EventObserver;\r\nuse Magento\\Framework\\Data\\Tree\\Node;\r\nuse Magento\\Framework\\Event\\ObserverInterface;\r\nclass Topmenu implements ObserverInterface\r\n{\r\n public function __construct(\r\n ...\/\/add dependencies here if needed\r\n )\r\n {\r\n ...\r\n }\r\n \/**\r\n * @param EventObserver $observer\r\n * @return $this\r\n *\/\r\n public function execute(EventObserver $observer)\r\n {\r\n \/** @var \\Magento\\Framework\\Data\\Tree\\Node $menu *\/\r\n $menu = $observer->getMenu();\r\n $tree = $menu->getTree();\r\n $data = [\r\n 'name' => __('Menu Lable'),\r\n 'id' => 'unique-id',\r\n 'url' => 'Menu URL',\r\n 'is_active' => (expression to determine if menu item is selected or not)\r\n ];\r\n $node = new Node($data, 'id', $tree, $menu);\r\n $menu->addChild($node);\r\n return $this;\r\n }\r\n}<\/pre>\nNow run upgrade command php bin\/magento setup:upgrade<\/strong> to install the module. Clear Magento 2 cache<\/strong>.<\/p>\n
You have known all the steps to add new links to navigation menu of Magento 2. if you have any questions about this post, please ask them in comments.<\/p>\n","protected":false},"excerpt":{"rendered":"
As we know Magento 2 does not include features like adding extra(home, blog) links to main navigation menu. In this blog post we will discuss how to add non category links to navigation menu in Magento 2. In this we will use Magento 2 Observer page_block_html_topmenu_gethtml_before to add new link to menu. Lets consider module… <\/p>\n