8

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?

Improve this question
1

3 Answers 3

Reset to default
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>
Improve this answer
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.
    – Mohammed Joraid
    Commented Jul 29, 2021 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.
    – Dilhan Maduranga
    Commented Sep 4, 2021 at 11:09
12

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

Improve this answer
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.
    – Mohammed Joraid
    Commented Jul 29, 2021 at 6:51
0

Extend default.xml layout file in your current theme to create new defaul.xml at path - ./app/design/frontend/Company/Yourtheme/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
  <body>
    <referenceBlock name="catalog.topnav">
                    <block 
 class="Magento\Framework\View\Element\Html\Link" name="custom- 
 top-link">
                        <arguments>
                            <argument name="label" 
 xsi:type="string" translate="true">Custom Top Link</argument>
                            <argument name="path" 
 xsi:type="string">*/*/*</argument>
                        </arguments>
                    </block>
                </referenceBlock>
            </body>
Improve this answer

Your Answer

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

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