How to Add Top Link in Magento 2

Adding top link in Magento 2 means showing some helpful links on the top of your pages. Here is the CMS block including some personal information of the customers as My Account, My Wishlist, Login or anything you need. Click on the top link and redirect the users to a CMS page where contains more particular information. Creating the top link may also push their wishes to encourage the clients to buy more and more. For example, on the top menu, “My Wishlist” link will save and lead them directly to the list of the product they are interested in before without checkout.

If you are searching how to add the top link on your Magento 2 store, this topic will help you complete all with many top links depending on your demands.

  • Step 1: Add/ modify default.xml file
  • Step 2: Add Link.php file

Step 1: Add/ modify default.xml file

Find the path app/code/Mageplaza/HelloWorld/view/frontend/layout, then add/ modify default.xml file by:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<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="Mageplaza\HelloWorld\Block\Link" name="add-new-header-link">
             <arguments>
     <argument name="label" xsi:type="string" translate="true">New Link</argument>
     <argument name="path" xsi:type="string" translate="true">new-link</argument>
     </arguments>
         </block>
     </referenceBlock>
</body>

Step 2: Add Link.php file

Continue with the path app/code/Mageplaza/HelloWorld/Block and you will add the link.php file:

<?php
 
namespace Mageplaza\HelloWorld\Block;
 
class Link extends \Magento\Framework\View\Element\Html\Link
{
/**
* Render block HTML.
*
* @return string
*/
protected function _toHtml()
    {
     if (false != $this->getTemplate()) {
     return parent::_toHtml();
     }
     return '<li><a ' . $this->getLinkAttributes() . ' >' . $this->escapeHtml($this->getLabel()) . '</a></li>';
    }
}

Run as the above and feel comfortable when you need to add the top link as the top menu for the customer’s experience on your Magento 2 store. Follow and enjoy it!





Enjoyed the tutorial? Spread it to your friends!

magento-2-tutorial
how-to
add
top
link

Comments for How to Add Top Link in Magento 2

Please leave comments if you have any questions, feedbacks.

Module Development

You also may like these Magento 2 Extensions

One Step Checkout

$199
10 reviews

Layered Navigation

$99
12 reviews

SEO

FREE
no review

People also searched for:

  • magento 2 how to add top link
  • how to add a link to top menu
  • magento 2 header links
  • magento 2 remove top links
  • magento 2 remove welcome message
  • magento 2 header file location
  • how to change header in magento 2
  • magento 2 remove default welcome message
  • magento 2 header block
  • add back to top button in magento 2
  • add custom top link magento 2
  • how to add new top link in magento 2
  • add home link in magento 2 top navigation menu
  • add top link in magento 2
  • how to add top link in magento 2
  • how to add top menu link in magento 2