How to Add Non-Category Link to Navigation Links in Magento 2

April 17, 2018 - Fire development, Magento 2

Magento 2 Development; Magento 2 tutorial

The following article sheds light on how to add a non-category link to navigation links in Magento 2. If you are not sure what to do, you’ve come to the right place, because below we detailly discuss this problem.

If you still think that the block which holds the category links in can be referenced to as navigation.sections and the following arguments can be directed towards the container providing the ability to create a new link under it, you are mistaken.

<referenceContainer name="navigation.sections">
            <block class="Magento\Framework\View\Element\Html\Links" name="mylink">
                    <arguments>
                        <argument name="label" xsi:type="string">Mylink</argument>
                        <argument name="path" xsi:type="string">mypath</argument>
                        <argument name="css_class" xsi:type="string">mycss</argument>
                    </arguments>
            </block>
</referenceContainer>

<argument name="label" xsi:type="string">Mylink</argument>

<argument name="path" xsi:type="string">mypath</argument>

<argument name="css_class" xsi:type="string">mycss</argument>

</arguments>

</block>

</referenceContainer>

The latest Magento 2 version doesn’t support this approach anymore. But you can still achieve your goal!

It is necessary to replace an observer with a plugin for Magento\Theme\Block\Html\Topmenu.

Find the etc/frontend/di.xml file.
Add the following code to it:

<type name="Magento\Theme\Block\Html\Topmenu">
    <plugin name="[module]-topmenu" type="[Namespace]\[Module]\Plugin\Block\Topmenu" />
</type>

</type>

Create the plugin class file [Namespace]/[Module]/Plugin/Block/Topmenu.php.
Add the following content:

<?php 

namespace [Namespace]\[Module]\Plugin\Block;

use Magento\Framework\Data\Tree\NodeFactory;

class Topmenu
{
    /**
     * @var NodeFactory
     */
    protected $nodeFactory;

    public function __construct(
        NodeFactory $nodeFactory
    ) {
        $this->nodeFactory = $nodeFactory;
    }

    public function beforeGetHtml(
        \Magento\Theme\Block\Html\Topmenu $subject,
        $outermostClass = '',
        $childrenWrapClass = '',
        $limit = 0
    ) {
        $node = $this->nodeFactory->create(
            [
                'data' => $this->getNodeAsArray(),
                'idField' => 'id',
                'tree' => $subject->getMenu()->getTree()
            ]
        );
        $subject->getMenu()->addChild($node);
    }

    protected function getNodeAsArray()
    {
        return [
            'name' => __('Label goes here'),
            'id' => 'some-unique-id-here',
            'url' => 'http://www.example.com/',
            'has_active' => false,
            'is_active' => false // (expression to determine if menu item is selected or not)
        ];
    }
}

<?php

namespace [Namespace]\[Module]\Plugin\Block;

use Magento\Framework\Data\Tree\NodeFactory;

class Topmenu

{

/**

* @var NodeFactory

protected $nodeFactory;

public function __construct(

NodeFactory $nodeFactory

) {

$this->nodeFactory = $nodeFactory;

}

public function beforeGetHtml(

\Magento\Theme\Block\Html\Topmenu $subject,

$outermostClass = '',

$childrenWrapClass = '',

$limit = 0

) {

$node = $this->nodeFactory->create(

[

'data' => $this->getNodeAsArray(),

'idField' => 'id',

'tree' => $subject->getMenu()->getTree()

]

);

$subject->getMenu()->addChild($node);

}

protected function getNodeAsArray()

{

return [

'name' => __('Label goes here'),

'id' => 'some-unique-id-here',

'url' => 'http://www.example.com/',

'has_active' => false,

'is_active' => false // (expression to determine if menu item is selected or not)

];

}

This is the fastest way of adding a non-category link to navigation links in Magento 2. We hope the article was useful. It is based on the StackExchange question by Themanwhoknowstheman and the answer by Marius♦ and Darren Felton. For more useful articles, check out our Cookbook.

Post Tags:magento 2 Magento 2 Developer’s Cookbook Navigation Links Non-Category Link

← Previous Post Next Post →

Magento 2 Google Sheets Integration Guide

Have you ever known that importing data to Magento 2 from Google Sheets is possible? It is not a joke,… Read more…
Magento 2 Page Builder Import & Export

In the following article, we shed light on Magento 2 Page Builder. You will learn its core features. After that,… Read more…
How to Import Custom CSV to Magento 2 Programmatically

Let's discuss the Magento 2 import of custom CSV files. Recently, we've been surfing across endless StackExchange discussions and stumbled… Read more…
How to Import Magento 2 Product by Store View?

You've come to the right place if you run a multilingual storefront or use several different store views. Below, we… Read more…
Magento 2 MSI User Guide: How to Import & Export Magento 2 MSI (Multi Source Inventory)

This Magento 2 MSI user guide briefly explains the platform's multi-source inventory functionality and then focuses on the Magento 2… Read more…
Magento Error Log to Debug Magento 2 Import & Export

Today, we are going to discuss the Magento error log for import and export processes. Since Magento 2 doesn’t have any… Read more…
Magento 2 Import of Custom Attributes: How to Import Products with Custom Attributes to Magento 2

When you import products to Magento 2, you may face various difficulties. Transferring them to your website without headaches is… Read more…
How to Import Data via REST API into Magento 2

Today, we'd like to draw your attention to the Magento 2 REST API Import. Depending on the edition of your… Read more…
How to Create a Custom Import in Magento 2

Although the default import and export instruments of Magento 2 are enough to satisfy the basic data transfer needs, you… Read more…
Magento 2 Import: How To Fix Value For Attribute Contains Incorrect Value Error

In the following article, you will discover a universal algorithm for solving Magento 2 errors associated with incorrect attribute values.… Read more…
Magento 2 Imported Resource (Image) Could Not Be Downloaded: How To Fix This Magento 2 Import Error

In the following article, we explore a problem that prevents Magento users from importing images. You may be familiar with… Read more…
Magento 2 General System Exception Happened: How To Fix Error During Magento 2 Import

If you regularly deal with Magento 2 import processes, you might have faced the following message: General System Exception Happened.… Read more…
How to Import & Export Product Attributes for Magento 2 (Along with Attribute Values & Sets)

Today, we are going to talk about the import and export of product attributes for Magento 2. Operating an e-commerce store… Read more…
How to Import Product Images into Magento 2 in Bulk

Below, we describe how to import product images in Magento 2 using CSV. Since it is a part of a product… Read more…
Magento 2 Bulk API & Asynchronous Import

Below, we discuss the Magento 2 bulk API and the corresponding asynchronous import processes. After a short introduction to the… Read more…
How to Import Database in Magento 2

Recently, we’ve spotted a question on StackExchange regarding the Magento 2 database import. David Duong faced problems while transferring a… Read more…
Magento 2 B2B Requisition List Guide: How to Manage & Import Requisition Lists in Magento 2

In the following article, we explain what a requisition list of Magento 2 is - a feature exclusively available in Adobe… Read more…
Magento 2 Shared Catalog Guide: How to Import and Export Shared Catalogs in Magento 2

The following article explores Magento 2 shared catalogs - a B2B entity exclusively available to Adobe Commerce users. You will learn what a… Read more…
Magento 2 B2B Company Guide: Revealing Company Structure & Import

If you want to migrate from the existing Magento B2B website, you may face a problem when companies cannot be… Read more…
How to Import & Export Magento 2 Gift Cards

Gift cards are a useful addition to every e-commerce website. They are frequently used on e-commerce websites with any assortment:… Read more…

Related posts