How to add custom link on top navigation menu in Magento 2
In this article, we'll look at how to add custom links in Magento 2. In Magento 2 we are able to customize in a three following way.
- Add a custom link on top navigation using a layout in Magento 2
- Add a custom link on top navigation using a plugin in Magento 2
- Add a custom link on top navigation using an observer in Magento 2
So, please follow the below simple steps to add custom links in the top menu in Magento 2.
Before we start I assume, you have already a created custom module. If you don't have it or don't know how to create it then check out our other article How To Create a Magento 2 Module.
Let's get started!!
1. Add a custom link on top navigation using a layout in Magento 2
First We'll need to create a default.xml file in our module at below path.
saveCopyzoom_out_mapapp/code/Devhooks/HelloWorld/view/frontend/layout/default.xml
In above, Devhooks is a Namespace name and HelloWorld is a Module name. So, please don't forget to change it with your Namespace and Module Name.
In case, if you don't want to create a module and add a link using your theme then you need to create a default.xml file at bellow path.
saveCopyzoom_out_mapapp/design/Devhooks/Mytheme/Magento_Customer/layout/default.xml
In above, Devhooks is a Namespace name and Mytheme is a Theme name. So, please don't forget to change it with your Namespace and Theme Name.
Now, Paste the below code in default.xml file.
saveCopyzoom_out_map<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="catalog.topnav">
<block class="Magento\Framework\View\Element\Html\Link" name="support-link">
<arguments>
<argument name="label" xsi:type="string" translate="true">Support</argument>
<argument name="path" xsi:type="string" translate="true">support</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Now, run the below command and check link is added or not in the top navigation menu.
saveCopyzoom_out_mapphp bin/magento cache:clean
2. Add a custom link on top navigation using a plugin in Magento 2
You need to create di.xml at following path.
saveCopyzoom_out_mapapp/code/Devhooks/HelloWorld/etc/frontend/di.xml
Paste the below code in di.xml file.
saveCopyzoom_out_map<?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="support_top_menu_link" type="Devhooks\HelloWorld\Plugin\Topmenulink" sortOrder="20" disabled="false"/>
</type>
</config>
Now, create a Topmenulink.php file at following path.
saveCopyzoom_out_mapapp/code/Devhooks/HelloWorld/Plugin/Topmenulink.php
Paste the below code in Topmenulink.php file.
saveCopyzoom_out_map<?php
namespace Devhooks\HelloWorld\Plugin;
use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Data\Tree\Node;
use Magento\Framework\Event\ObserverInterface;
class Topmenulink implements ObserverInterface
{
public function afterGetHtml(\Magento\Theme\Block\Html\Topmenu $topmenu, $html)
{
$itemUrl = $topmenu->getUrl('support'); //add link here
$currentUrl = $topmenu->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true]);
if (strpos($currentUrl,'support') !== false) {
$html .= "<li class="level0 nav-5 active level-top parent ui-menu-item">";
} else {
$html .= "<li class="level0 nav-4 level-top parent ui-menu-item">";
}
$html .= "<a href="" . $itemUrl . "" class="level-top ui-corner-all"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><span>" . __("Support") . "</span></a>";
$html .= "</li>";
return $html;
}
}
Now, run the below command and check link is added or not in the top navigation menu.
saveCopyzoom_out_mapphp bin/magento cache:clean
3. Add a custom link on top navigation using an observer in Magento 2
You need to create events.xml at following path.
saveCopyzoom_out_mapapp/code/Devhooks/HelloWorld/etc/frontend/events.xml
Paste the below code in events.xml file.
saveCopyzoom_out_map<?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="support_top_menu_link" instance="Devhooks\HelloWorld\Observer\Topmenulink" />
</event>
</config>
Now, create a Topmenulink.php file at following path.
saveCopyzoom_out_mapapp/code/Devhooks/HelloWorld/Observer/Topmenulink.php
Paste the below code in Topmenulink.php file.
saveCopyzoom_out_map<?php
namespace Devhooks\HelloWorld\Observer;
use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Data\Tree\Node;
use Magento\Framework\Event\ObserverInterface;
class Topmenulink implements ObserverInterface
{
public function __construct(
...//add dependencies here if needed
)
{
...
}
/**
* @param EventObserver $observer
* @return $this
*/
public function execute(EventObserver $observer)
{
/** @var \Magento\Framework\Data\Tree\Node $menu */
$menu = $observer->getMenu();
$tree = $menu->getTree();
$data = [
'name' => __('Support'), // Link Lable
'id' => 'support', //unique-id-here
'url' => 'support', //get proper url with $this->urlBuilder->getUrl(support)
'is_active' => false //(expression to determine if menu item is selected or not) (true/false)
];
$node = new Node($data, 'id', $tree, $menu);
$menu->addChild($node);
return $this;
}
}
Now, run the below command and check link is added or not in the top navigation menu.
saveCopyzoom_out_mapphp bin/magento cache:clean
That's it!! Check Out our other article if you want to add the top menu link in Magento 2.
If you are a beginner and want to know more about Magento 2 Commands then check out our other article which is Useful Commands for Magento 2.
I hope this article helps you to find what you were looking for.
Bookmark it for your future reference. Do comment below if you have any other questions on that.
P.S. Do share this article with your team.