7

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?

12

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>
2
  • Could you please add a way to make the link visibility on Mobile vs Desktop controllable. E.g. only show the link on Mobile. Jul 29 at 6:51
  • I would do it using CSS/LESS. Better to do it in the client-side than server-side as the pages should be responsive. Sep 4 at 11:09
9

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

1
  • With your alternative method, could you please add a way to make the link visibility on Mobile vs Desktop controllable. E.g. only show the link on Mobile. Jul 29 at 6:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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