Add a custom navbar menu

Question

I am trying to add a custom link(contact us) in navbar menu and wanted to add the contact us page link. how to add that?

please check https://magento.stackexchange.com/questions/95017/adding-a-non-category-link-to-the-navigation-links-in-magento-2 and https://webkul.com/blog/how-to-add-custom-link-in-navigation-menu-in-magento2/ — Pawan, Dec 16 '19 at 02:49

score 3 · Accepted Answer · answered Dec 16 '19 at 04:01

3

You can add the below code in theme default.xml file

<referenceBlock name="catalog.topnav">
        <block class="Magento\Framework\View\Element\Html\Link" name="custom.contact.link">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">Contact us</argument>
                <argument name="path" xsi:type="string" translate="true">contact</argument>
                <argument name="class" xsi:type="string" translate="true">custom-contact-link</argument>
            </arguments>
        </block>
    </referenceBlock>

answered Dec 16 '19 at 04:01

Kishor Thummar

3,000
1
9
18

Not working Sir. I am using Magento 2.3.0. And the theme is the Porto theme. – Chandan Sayed Dec 16 '19 at 04:42
@ChandanSayed , Porto theme has the option to add menu item before and after the main menu, Please check in Megamenu Configurations. there is an option to assign block from after menu. – Kishor Thummar Dec 16 '19 at 04:55
– Chandan Sayed Dec 16 '19 at 06:23
So you mean to apply my code you need to add , Right? – Kishor Thummar Dec 16 '19 at 06:28
app/design/frontend/Smartwave/porto/Smartwave_Megamenu default.xml – Chandan Sayed Dec 16 '19 at 06:30
sir, I share the code from default.xml – Chandan Sayed Dec 16 '19 at 06:31
Okay, but how you added contact us link to top menu? – Kishor Thummar Dec 16 '19 at 06:31
I tried to add but it is not working, Sir – Chandan Sayed Dec 16 '19 at 06:32
app/code/Smartwave/Megamenu/view/frontend/layout detault.xml – Chandan Sayed Dec 16 '19 at 06:34
Check this default.xml too – Chandan Sayed Dec 16 '19 at 06:35
Let us continue this discussion in chat. – Kishor Thummar Dec 16 '19 at 06:36
app/design/frontend/Smartwave/porto/Smartwave_Megamenu default.xml Contact us contact custom-contact-link – Chandan Sayed Dec 16 '19 at 06:36
I tried to add the code you gave me – Chandan Sayed Dec 16 '19 at 06:36

score 1 · Answer 2 · edited Dec 25 '19 at 09:01

Add Custom Header Links

Step 1: Create a layout XML file in the below path for add custom header. app/code/VendorName/ModuleName/view/frontend/layout/default.xml

<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body> 
        <referenceBlock name="header.links"> 
            <move element="custom-link" destination="header.links"/> 
            <block class="VendorName\ModuleName\Block\Header" name="custom-link" after="my-account-link"/>
        </referenceBlock> 
    </body> 
</page>

Step 2: Create a block file in the below path that is referred in the layout file. app/code/VendorName/ModuleName/Block/Header.php

<?php 
namespace VendorName\ModuleName\Block; 
class Header extends \Magento\Framework\View\Element\Html\Link 
{ 
    protected $_template = ‘VendorName_ModuleName::link.phtml'; 

    public function getHref() { 
        return__( 'contactus'); 
    } 

    public function getLabel() { 
        return __('Contact Us'); 
    } 
} ?>

Step 3: Create a template file in the below path that is referred to the block file. app/code/VendorName/ModuleName/view/frontend/templates/link.phtml

<li> 
    <a <?php echo $block->getLinkAttributes() ?>><?php echo $block->escapeHtml($block->getLabel())?></a>
</li>

Add Custom Footer Links:

Step 1: Create a layout XML file in the below path for add custom footer.

<?xml version="1.0"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body> 
        <referenceBlock name="footer_links">
            <block class="Magento\Framework\View\Element\Html\Link\Current" name="custom-link-2">
                <arguments>
                    <argument name="label" xsi:type="string">Custom Footer Link</argument>
                    <argument name="path" xsi:type="string">custom_footer_link</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body> 
</page>

Add a custom navbar menu

2 Answers2