How to add the top menu link in Magento 2 • Dev Hooks • devhooks.in

In this article, I will give you a simple steps to add a link in the top menu in Magento 2. In following example we'll add two links in the top menu.

First we'll add Support link in the top menu.
Second we'll add a Create Ticket link in the top link dropdown which will display if user is login display.

Magento 2 add top menu link So, please follow bellow simple steps to add top menu link in Magento 2.

Before we start I assume, you have already a created custom module. If you don't have it or don't know how to create it then check out our other article How To Create a Magento 2 Module.

Let's get started!!

1. Add link in the top menu.

First We'll need to create a default.xml file in our module at below path.

saveCopyzoom_out_mapapp/code/Devhooks/HelloWorld/view/frontend/layout/default.xml

In above, Devhooks is a Namespace name and HelloWorld is a Module name. So, please don't forget to change it with your Namespace and Module Name.

In case, if you don't want to create a module and add a link using your theme then you need to create a default.xml file at bellow path.

saveCopyzoom_out_mapapp/design/Devhooks/Mytheme/Magento_Customer/layout/default.xml

In above, Devhooks is a Namespace name and Mytheme is a Theme name. So, please don't forget to change it with your Namespace and Theme Name.

Now, Paste the below code in default.xml file.

saveCopyzoom_out_map<?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">
          <block class="Magento\Framework\View\Element\Html\Link" name="contact-top-header-link">
              <arguments>
                  <argument name="path" xsi:type="string">support</argument>
                  <argument name="label" xsi:type="string" translate="true">Support</argument>
              </arguments>
          </block>
      </referenceBlock>
  </body>
</page>

Now, run the below command and check link is added or not in the top menu.

saveCopyzoom_out_mapphp bin/magento cache:clean

2. Add a link in the top link dropdown

Now, Let’s learn how to add a link in the top link dropdown in magento 2. For that we need to add a below code in the default.xml file.

saveCopyzoom_out_map<?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="top.links">
          <block class="Magento\Customer\Block\Account\SortLink" name="order-history-top-link" after="wish-list-link">
              <arguments>
                  <argument name="path" xsi:type="string">support/ticket/create</argument>
                  <argument name="label" xsi:type="string" translate="true">Create Ticket</argument>
              </arguments>
          </block>
      </referenceBlock>
  </body>
</page>

Now, run the below command and check link is added or not in the top link dropdown.

saveCopyzoom_out_mapphp bin/magento cache:clean

That's it!! Check Out our other article if you want to add custom link on top navigation menu in Magento 2.

If you are a beginner and want to know more about Magento 2 Commands then check out our other article which is Useful Commands for Magento 2.

I hope this article helps you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions on that.

P.S. Do share this article with your team.

Review other articles maybe it'll help you too.