Magento – add CMS page link category menu in Magento 2

magento2navigation

How to add cms page link category navigation menu Like

Example Like Home | About Us | Contact Us | Our Products

Please check screenshot

Best Answer

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

Related Solutions

Magento – How to add active state to CMS Page in Top Menu

Here is the proper way to add a cms page link to the main menu without using the event page_block_html_topmenu_gethtml_before.
This way you will be able to add an active state to it also.
So create an observer in one of your modules that can look like this:

public function addCmsPage($observer) 
{
    //your page identifier
    $cmsPageIdentifier = 'page_idendifier_here';
    //get the menu instance
    $menu = $observer->getMenu();
    //load the page
    $page = Mage::getModel('cms/page')->load($cmsPageIdentifier, $identifier);
    //if the page exists
    if ($page->getId()) {
        $active = false;
        // Get the full action name for the request.
        $fullActionName = Mage::app()->getFrontController()->getAction()->getFullActionName();
        //check if we are on the view page action for the required page
        if ($fullActionName == 'cms_page_view') {
             $pageId = Mage::app()->getRequest()->getParam('page_id', $this->getRequest()->getParam('id', false)); 
             if ($pageId == $page->getId()) {
                 $active = true;
             }
        }
        //build a new menu item node
        $data = array(
            'name' => $page->getTitle(),
            'id' => 'cms-'.$cmsPageIdentifier,
            'url' => Mage::getUrl('', array('_direct'=>$cmsPageIdentifier)),
            'is_active' => $active
        );
        $pageNode = new Varien_Data_Tree_Node($data, 'id', $tree, $menu);
        //attach the node to the menu
        $menu->addChild($pageNode);
    }
}

Magento 2 – How to Add Custom Link in Main Menu

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>

Best Answer

Related Solutions

Magento – How to add active state to CMS Page in Top Menu

Magento 2 – How to Add Custom Link in Main Menu

Related Topic