Magento 2. How to Manage Top (Header) Links

Header/Top links section in Magento is the default block generally used to create a personal area, like ‘My Account’, ‘My Wishlist’, ‘Sign in’, etc.

Let’s check the most common links, added to the header of your website:

My WishList

You can remove the link  using your store admin panel. In order to do this, log into your Magento store admin panel.

Go to Stores, then under the Settings tap Configuration.

Expand the Customers tab and click on Wish List.

Expand the General Options section.

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

Click on the Save Config button.

Clear the Magento cache.

Compare Product

Open the “vendor/magento/module-catalog/view/frontend/layout/default.xml” file.

Find the following line:

<referenceBlock name="top.links">

view raw .xml hosted with by GitHub

and input the following code before the body end tag:

<referenceBlock name="top.links" remove="true"/>

view raw gistfile1.txt hosted with by GitHub

This will remove ‘compare product’ from the category product listing, however you can use this method for any other layout as well.

Blog link

Open the app\code\TemplateMonster\Blog\view\frontend\layout\default.xml file and find

	<referenceBlock name="top.links">
	<block class="TemplateMonster\Blog\Block\Link" name="blog.link" template="TemplateMonster_Blog::link.phtml" after="-" />
	</referenceBlock>

view raw .xml hosted with by GitHub

You can remove it or edit.

My Account, Create an account

Open the vendor\magento\module-customer\view\frontend\layout\default.xml  file and find the text code.

	<block class="Magento\Customer\Block\Account\Link" name="my-account-link">
	<arguments>
	<argument name="label" xsi:type="string" translate="true">My Account</argument>
	</arguments>
	</block>
	<block class="Magento\Customer\Block\Account\RegisterLink" name="register-link">
	<arguments>
	<argument name="label" xsi:type="string" translate="true">Create an Account</argument>
	</arguments>
	</block>

view raw .xml hosted with by GitHub

You can remove it or edit.

Sign In

Open the  vendor\magento\module-customer\view\frontend\templates\account\link\authorization.phtml file and find the following code.

	<li class="authorization-link" data-label="<?php echo $block->escapeHtml(__('or')); ?>">
	<a <?php /* @escapeNotVerified */ echo $block->getLinkAttributes(); ?><?php /* @escapeNotVerified */ echo $dataPostParam; ?>>
	<?php echo $block->escapeHtml($block->getLabel()); ?>
	</a>
	</li>

view raw .phtml hosted with by GitHub

You can remove it or edit, as well as the previous links.

Add the Custom Link

We will also show you how to add a contact link (CMS page based) to the Magento 2 top links header.

1. Firstly, you need to create a CMS page, for example, a “Contact Us” page with the “contacts” identifier.
2. Secondly, link access to the contacts page http://domain.com/contacts
3. Thirdly, to add Magento 2 top links, you need to add the following code into a default.xml file of your theme.

Add the code after the body tag of the *.xml file. For example, insert it into the following file: app/design/frontend/TemplateMonster/themeXXX/Magento_Theme/layout/default.xml

	<block class=”\Magento\Framework\View\Element\Html\Link” name=”ves-top-link”>
	<arguments>
	<argument name=”label” xsi:type=”string” translate=”true”>Contact Us1</argument>
	<argument name=”path” xsi:type=”string” translate=”true”>contacts</argument>
	</arguments>
	</block>

view raw .xml hosted with by GitHub

The code will redirect to “Magento\Framework\View\Element\Html\Link” class, the transfers label = Contact Us and path = contacts (http://domain.com/contacts)

We want to show you how to manage this using Static Block as well. You can add a new static block to your theme default.xml file.

Then add the code after the body tag of the *.xml file. For example, insert it into the following file: app/design/frontend/TemplateMonster/themeXXX/Magento_Theme/layout/default.xml

	<referenceBlock name="header.panel">
	<block class="Magento\Cms\Block\Block" name="header_promo_top">
	<arguments>
	<argument name="block_id" xsi:type="string">header_promo_top</argument>
	</arguments>
	</block>
	</referenceBlock>

view raw .xml hosted with by GitHub

Here the header_promo_top is your static block that will contain your content.

We hope our detailed instructions will not cause any hesitations or questions, but if you have any we will be more than happy to answer them.