How to add custom link in main menu in Magento 2?

magento.stackexchange https://magento.stackexchange.com/questions/333005

Question

I want to add CMS pages and Contact page link in the main menu.

How to add these links in the main menu and their submenu as well?

Was it helpful?

Solution

copy file from 

vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml

and put this file in your theme location

app/design/frontend/Vendor/YourTheme/Magento_Theme/templates/html/topmenu.phtml

Add below <li> structure just after <?php /* @escapeNotVerified */ echo $block->getChildHtml(); ?> line in topmenu.phtml

<li class="level0 level-top ui-menu-item">
    <a href="<?php echo $this->getBaseUrl()."yourlink"; ?>" class="level-top ui-corner-all"  role="menuitem">
        <span><?php echo __("Your Custom Menu")?></span>
    </a>
</li>

OTHER TIPS

Another alternative is to use a new template file via layout xml.

./app/design/frontend/Company/Yourtheme/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright info.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.topnav">
            <block name="custom.menu.links" template="Magento_Theme::html/topmenu_custom.phtml"/>
        </referenceBlock>
    </body>
</page>

Then use this template file to create link html.

./app/design/frontend/Company/Yourtheme/Magento_Theme/templates/html/topmenu_custom.phtml

<?php
/** @var \Magento\Framework\View\Element\Template $block */
?>
<li class="level0 level-top ui-menu-item">
    <a href="<?php echo $this->getBaseUrl()."faq"; ?>" class="level-top ui-corner-all"  role="menuitem">
        <span><?= __("FAQ")?></span>
    </a>
</li>
<li class="level0 level-top ui-menu-item">
    <a href="<?php echo $this->getUrl('custom/index/index'); ?>" class="level-top ui-corner-all"  role="menuitem">
        <span><?= __("Custom Designs")?></span>
    </a>
</li>

When you clear the layout and block_html caches, these will show in the menu. Note:

  • This way we won't touch the original topmenu.phtml
  • This will use topmenu.phtml's $block->getChildHtml() to render the output
  • In layout xmls if you ignore the class="" attribute for a block, then \Magento\Framework\View\Element\Template class will be used by default.

Hope that helps

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top