Magento 2 – How to Add Custom Link in Main Menu

You can add elements to the top menu using the event page_block_html_topmenu_gethtml_before.

Step 1 - So you need to create a module with these files (all the files should be in app/code/[Namespace]/[Module]):

Step 2 - app/code/[Namespace]/[Module]/etc/module.xml - the module declaration file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[Namespace]_[Module]" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Theme"/>
        </sequence>
    </module>
</config>

Step 3 - app/code/[Namespace]/[Module]/registration.php - the registration file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[Namespace]_[Module]',
    __DIR__
);

Step 4 - app/code/[Namespace]/[Module]/etc/frontend/events.xml - the events declaration file

<?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="[namespace]_[module]_observer" instance="[Namespace]\[Module]\Observer\Topmenu" />
    </event>
</config>

Step 5 - app/code/[Namespace]/[Module]/Observer/Topmenu.php - the actual observer

<?php
namespace [Namespace]\[Module]\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 item label here'),
            '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;
    }
}

There is a issue with plugin order

In default Magento already plugin define in vendor/magento/module-catalog/etc/di.xml

<type name="Magento\Theme\Block\Html\Topmenu">
    <plugin name="catalogTopmenu" type="Magento\Catalog\Plugin\Block\Topmenu" />
</type>

And we created custom plugin in app\code{VendorName}{ModuleName}\etc\di.xml

<type name="Magento\Theme\Block\Html\Topmenu">
    <plugin name="add_cms_menu" type="{VendorName}{ModuleName}\Plugin\Topmenu" sortOrder="0" />
</type>

That means core and custom plugin, both are same exist with same sort order.

If you want to display custom menu just before category menu, sort order required minimum values to core value.

Use below code for plugin and check you custom menu

<type name="Magento\Theme\Block\Html\Topmenu">
    <plugin name="add_cms_menu" type="{VendorName}{ModuleName}\Plugin\Topmenu" sortOrder="-1" />
</type>

I hope it will be useful for you. Let me know if not working