:::: MENU ::::

Magento 2 add custom link topmenu

Magento 2 add custom link topmenu

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
Category: Magento 2
Last Modified: November 13, 2018


So, what do you think ?