Magento 2 add custom link topmenu

Qaisar Satti

7 years ago

Today, we’ll talk about Magento 2 add custom link topmenu. This tutorial include how to add custom link in top navigation or topmenu in Magento 2.It is very create For any suggestions & question, please feel free to drop a comment.

If you are adding in your theme create default.xml in following path.

Layout Method

app/design/frontend/QaisarSatti/theme/Magento_Theme/layout/default.xml

Or you want it to add from module layout then create default.xml in following path.

app/code/QaisarSatti/view/HelloWorld/frontend/layout/default.xml

Now add the following code, you can label and url ask you required.

<referenceBlock name="catalog.topnav">
<block class="Magento\Framework\View\Element\Html\Link\Current" name="cart" before="account">
<arguments>
<argument name="label" xsi:type="string">Cart</argument>
<argument name="path" xsi:type="string">checkout/cart</argument>
</arguments>
</block>
</referenceBlock>

Observer Method

Create file events.xml if not exists. QaisarSatti/HelloWorld/etc/frontend/events.xml

<?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="QaisarSatti_HelloWorld_Topmenu" instance="QaisarSatti\HelloWorld\Observer\Topmenu" />
</event>
</config>

Now Create file Topmenu.php in following directory QaisarSatti/HelloWorld/Observer/Topmenu.php

namespace QaisarSatti\HelloWorld\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(
...//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' => __('Menu label'),
'id' => 'some-unique-id-here',
'url' => 'url goes here',
'is_active' => (expression to determine if menu item is selected or not)
];
$node = new Node($data, 'id', $tree, $menu);
$menu->addChild($node);
return $this;
}
}

Plugin Method

Create file di.xml if not exists. QaisarSatti/HelloWorld/etc/frontend/di.xml

<?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="add_menu_item" type="QaisarSatti\HelloWorld\Plugin\Topmenu" sortOrder="10" disabled="false"/>
</type>
</config>

Now Create file Topmenu.php in following directory QaisarSatti/HelloWorld/Plugin/Topmenu.php

namespace QaisarSatti\HelloWorld\Plugin;
use Magento\Framework\Event\Observer as EventObserver;
use Magento\Framework\Data\Tree\Node;
use Magento\Framework\Event\ObserverInterface;
class Topmenu implements ObserverInterface
{
public function afterGetHtml(\Magento\Theme\Block\Html\Topmenu $topmenu, $html)
{
$itemUrl = $topmenu->getUrl('helloworld');//add link here
$currentUrl = $topmenu->getUrl('*/*/*', ['_current' => true, '_use_rewrite' => true]);
if (strpos($currentUrl,'helloworld') !== 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>" . __("Hello World") . "</span></a>";
$html .= "</li>";
return $html;
}
}