How to add custom menu in top nav section in magento 2.2.5

Question

I'm trying to add custom menu in top nav section or place any custom menu removing the existing one. How to customise this section. Please tell me step by step. I'm unable to do this after the searching in google also, i'm little newbie in magento 2.2.5

Answer 1

You have 2 options here 1 either you use some free extension like IBNAB Menu Mgento menu or 2nd option is create CMS block and add your custom menu html code there then remove your top.cagtalog.nav and add your cms block instead.

Remove Top Menu :

<referenceBlock name="catalog.topnav" remove="true"/>

Add your custom menu cms block:

<block class="Magento\Cms\Block\Block" name="custom.menu" after="-">
    <arguments>
        <argument name="block_id" xsi:type="string">custom-cms-menu</argument>
     </arguments>
</block>

You can move and place code inside any referenceContainer where you want to show the menu.

hope this will help.

Answer 2

1. Create di.xml inside app/code/Vendor/Module/etc

<?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_cms_menu" type="Vendor\Module\Plugin\Topmenu" sortOrder="1" />
    </type>
</config>

2. Create Topmenu.php inside app/code/Vendor/Module/Plugin

<?php 
namespace Vendor\Module\Plugin;
use Magento\Framework\Data\Tree\NodeFactory;

class Topmenu
{
    protected $nodeFactory;
    protected $_storeManager;
    protected $_pageFactory;
    protected $_urlBuilder;

    public function __construct(
        NodeFactory $nodeFactory,
        \Magento\Cms\Model\PageFactory $pageFactory,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\UrlInterface $urlBuilder
    ) {
        $this->nodeFactory = $nodeFactory;
        $this->_pageFactory = $pageFactory;
        $this->_storeManager = $storeManager;
        $this->_urlBuilder = $urlBuilder;
    }

    public function beforeGetHtml(
        \Magento\Theme\Block\Html\Topmenu $subject,
        $outermostClass = '',
        $childrenWrapClass = '',
        $limit = 0
    ) {
        // Add Custom Menu

          $node = $this->nodeFactory->create(
            [
                'data' => [
                    'name' => __('Custom Menu'),
                    'id' => 'custom-menu',
                    'url' => $this->_urlBuilder->getUrl(null, ['_direct' =>'custom-menu']),
                    'has_active' => false,
                     'is_active' => false
                     ],
                 'idField' => 'id',
                 'tree' => $subject->getMenu()->getTree()
            ]
        );
        $subject->getMenu()->addChild($node);
    }
}