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

  • what you mean by custom menu ? are these categories or cms pages too ? Sep 6, 2018 at 11:00
  • Yes, it can be categories or cms pages or may like custom link with custom title. Like this.
    – M.Suman
    Sep 6, 2018 at 11:56

2 Answers 2


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="-">
        <argument name="block_id" xsi:type="string">custom-cms-menu</argument>

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

hope this will help.

  • Thank you so much for your help. Will you please tell me one more thing that in admin panel in block section, how I'll place the link that is "Sign in", "Create an account" and after that if customer login into that, then the "Account Link" will show. How I will do that. I'm really exhausted to customize this header portion. If I change anything nothing work properly. Please help. Thanks in advance.
    – M.Suman
    Sep 7, 2018 at 11:06

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

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    <type name="Magento\Theme\Block\Html\Topmenu">
        <plugin name="add_cms_menu" type="Vendor\Module\Plugin\Topmenu" sortOrder="1" />

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

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()
  • I'm using child theme of Luma, and in Magento_Theme folder default.xml file i added below code <block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" after="register-link"> <arguments> <argument name="label" xsi:type="string" translate="false">Constact Us</argument> <argument name="path" xsi:type="string" translate="false">contact-us</argument> </arguments> </block> But this is actually removing the "Sign In" Link
    – M.Suman
    Sep 6, 2018 at 13:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.