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?

Rafael Corrêa Gomes
  • 13,309
  • 14
  • 84
  • 171
Dipesh Rangani
  • 3,035
  • 4
  • 21
  • 43
  • https://magento.stackexchange.com/questions/95017/adding-a-non-category-link-to-the-navigation-links-in-magento-2/360510#360510 – akashmalik Oct 06 '22 at 11:37

3 Answers3

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>
Dipesh Rangani
  • 3,035
  • 4
  • 21
  • 43
Suresh Chikani
  • 15,836
  • 11
  • 62
  • 99
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

Dilhan Maduranga
  • 443
  • 4
  • 11
  • 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 Jul 29 '21 at 06: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>
inder
  • 61
  • 7