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">
<!-- Add Plugin for add custom link in navigation -->
<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;
}
}
Author: Qaisar Satti
Last Modified: November 13, 2018
