How to Add Top Links in Magento 2?

How to Add Top Links in Magento 2?

Magento 2 offers a header CMS block to display top links by default.

It can include customer information such as My Account, Wishlist, Currency options.

Creating top links encourages customers to buy more. It improves navigation and the user experience.

Get the steps on how to add the top links in Magento 2.

Add Custom Magento 2 Module

We firstly create a module.xml file at app/code/Demo/Toplink/etc. file path. Add the code mentioned below in the file.

<?xml version="1.0"?>
	<config xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
	<module name="Demo_Toplink" setup_version="1.0.1"></module>
</config>

Now create a registration.php in app/code/Demo/Toplink file path. Enter the following code to the file.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Demo_Toplink',
    __DIR__
);

Magento 2 Add Top Links (Header)

Now, create a default.xml file in app/code/Demo/Toplink/view/frontend/layout.

Enter the following code -

<?xml version="1.0"?>
<page xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
     <referenceBlock name="header.links">
         <block class="Demo\Toplink\Block\Link" name="custom-header-link">
             <arguments>
     <argument name="label" xsi:type="string" translate="true">Advanced Search</argument>
     <argument name="path" xsi:type="string" translate="true">catalogsearch/advanced</argument>
     </arguments>
         </block>
     </referenceBlock>
</body>
</page>

Note: You can see the ‘Advanced Search Page Link’ in the code mentioned above. You can add more links in the top section of your Magento 2 store.

Create a Link.php -

Now we make a Link.php file at location app/code/Demo/Block and add the code mentioned below.

<?php
 
namespace Demo\Toplink\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>';
    }
}

Launch the SSH terminal and connect your store.

Move to the root directory of your Magento 2 store to run the CLI commands below.

Upgrade the setup by running this CLI command:

php bin/magento setup:upgrade

Compile the set up with the CLI command:

php bin/magento setup:di:compile

Flush Cache and Test the Top link Result

You can now clean and flush the cache with the following commands:

php bin/magento cache:clean
php bin/magento cache:flush

Now the Magento 2 store custom top link has been updated. You can launch the store to see the output on the CMS page.

How to Add Top Links in Magento 2?

How to Remove a Top Link from Magento 2

You can remove a link such as My Wishlist using the store’s admin panel.

Go to Stores, and under the Settings tap on Configuration.

How to Remove Top Links in Magento 2

Expand the Customers tab and click on the Wish List button.

Expand the General Options section from the panel.

Disable the Use system value checkbox and set the Enabled option to No.

How to Remove Top Links in Magento 2

Click on the Save Config button.

Clear the Magento cache to see the required output.

You can use the same method to remove other links such as My Account, Contact Us, and Sign In options.

EndNote

Adding essential links at the top of the website lets customers know more about your store.

It lets you increase the engagement and conversion rates of the store.

The tutorial shows how to quickly add top links to the Magento 2 store.

Learn more about the Magento platform on the MGT-Commerce Tutorials.

Nikita S.
Nikita S.
Lead Technical Writer

As a professional content writer, Nikita S. is experienced in crafting well-researched articles that simplify complex information and promote technical communication. She is enthusiastic about cloud computing and holds a specialization in digital marketing.


Get the fastest Magento Hosting! Get Started