{"id":1493,"date":"2020-12-30T11:22:48","date_gmt":"2020-12-30T11:22:48","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/add-custom-menu-item-in-magento-2-frontend\/"},"modified":"2025-07-17T10:12:38","modified_gmt":"2025-07-17T04:42:38","slug":"add-custom-menu-item-in-magento-2-frontend","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/add-custom-menu-item-in-magento-2-frontend\/","title":{"rendered":"How to Add Custom Menu Item in Magento 2 Frontend"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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 <\/strong>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?<\/p>\n\n\n\n

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<\/em> for customers to click and open the profile information.  <\/span><\/p>\n\n\n\n

There are two separate methods to add custom menu item in Magento 2 frontend:<\/p>\n\n\n\n

    \n
  1. Using Plugin<\/li>\n\n\n\n
  2. Using Event and Observer<\/li>\n<\/ol>\n\n\n\n

    Programmatic Solution to Add Custom Menu in Magento 2 Frontend<\/h2>\n\n\n\n

    Method 1: [sta_anchor id=”plugin”]Add Custom Menu in Magento 2 Frontend Using Plugin[\/sta_anchor]<\/h3>\n\n\n\n

    1. You have to create a plugin. Create di.xml <\/strong><\/strong>at [vendor]\/[extension]\/etc\/frontend\/<\/strong><\/strong><\/p>\n\n\n\n

    <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n    <type name=\"Magento\\Theme\\Block\\Html\\Topmenu\">\n        <plugin name=\"custom_menu_item\" type=\"[vendor]\\[extension]\\Plugin\\Topmenu\" sortOrder=\"10\"\n                disabled=\"false\"\/>\n    <\/type>\n<\/config><\/pre>\n\n\n\n
    2. Create Topmenu.php <\/strong><\/strong>at [vendor]\/[extension]\/Plugin\/<\/strong><\/strong><\/p>\n\n\n\n
    <?php\n\nnamespace [vendor]\\[extension]\\Plugin;\n    use Magento\\Framework\\Data\\Tree\\NodeFactory;\n    use Magento\\Framework\\UrlInterface;\n\n    class   Topmenu\n    {\n        protected $nodeFactory;\n        protected $urlBuilder;\n\n        public function __construct(NodeFactory $nodeFactory, UrlInterface $urlBuilder)\n        {\n            $this->nodeFactory = $nodeFactory;\n            $this->urlBuilder = $urlBuilder;\n        }\n\n        public function beforeGetHtml(\\Magento\\Theme\\Block\\Html\\Topmenu $subject, $outermostClass = '', $childrenWrapClass = '', $limit = 0)\n        {\n            $menuNode = $this->nodeFactory->create(['data' => $this->getNodeAsArray(\"Profile\", \"mnuMain\"),\n                'idField' => 'id',\n                'tree' => $subject->getMenu()->getTree(),]);\n            $menuNode->addChild($this->nodeFactory->create(['data' => $this->getNodeAsArray(\"MainMenu\", \"mnuMyMenu\"),\n                'idField' => 'id',\n                'tree' => $subject->getMenu()->getTree(),]));\n\n            $subject->getMenu()->addChild($menuNode);\n\n        }\n\n        protected function getNodeAsArray($name, $id)\n        {\n            $url = $this->urlBuilder->getUrl(\"\/\" . $id); \/\/here you can add url as per your choice of menu\n            return ['name' => __($name),\n                'id' => $id,\n                'url' => $url,\n                'has_active' => false,\n                'is_active' => false,];\n        }\n    }<\/pre>\n\n\n\n
    Method 2: [sta_anchor id=”event-observer”]Add Custom Menu in Magento 2 Frontend Using Event and Observer[\/sta_anchor]<\/h3>\n\n\n\n
    1. Create events.xml<\/strong> file at [vendor]\/[extension]\/etc\/frontend<\/strong><\/strong><\/p>\n\n\n\n
    <?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Event\/etc\/events.xsd\">\n    <event name=\"page_block_html_topmenu_gethtml_before\">\n        <observer name=\"Meetanshi_CustomerProfile_observer\" instance=\"[vendor]\\[extension]\\Observer\\Topmenu\"\/>\n    <\/event>\n<\/config><\/pre>\n\n\n\n
    2. Now create Topmenu.php<\/strong>  file at [vendor]\/[extension]\/Observer<\/strong><\/strong><\/p>\n\n\n\n
    <?php\n\nnamespace [vendor]\\[extension]\\Observer;\n    use Magento\\Framework\\Event\\Observer as EventObserver;\n    use Magento\\Framework\\Data\\Tree\\Node;\n    use Magento\\Framework\\Event\\ObserverInterface;\n\n    class Topmenu implements ObserverInterface\n    {\n        public function __construct()\n        {\n        }\n\n        public function execute(EventObserver $observer)\n        {\n            $menu = $observer->getMenu();\n            $tree = $menu->getTree();\n            $data = ['name' => __('MyMenu'),\n                'id' => 'some-unique-id-here',\n                'url' => 'url goes here',\n                'is_active' => false];\n            $node = new Node($data, 'id', $tree, $menu);\n            $menu->addChild($node);\n            return $this;\n        }\n    }<\/pre>\n\n\n\n
    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.<\/p>\n\n\n
    \n
    \"add<\/a><\/figure>\n<\/div>\n\n\n
    Please do consider sharing this post with Magento Community via social media.<\/p>\n\n\n\n
    Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":"
    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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1493","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1493","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1493"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1493\/revisions"}],"predecessor-version":[{"id":13895,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1493\/revisions\/13895"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1493"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1493"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1493"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}