How to add custom link in header links and top links in Magento 2?

Oct 22nd, 2018 4 min to read
Table of Contents

In this post, I will be guiding you on how to add our custom link in header links and top links.

Header link will be displayed for both guest and logged in customer. But top links will only display if the customer is logged in.

To add custom link in the header and top links, I will create default.xml file in app/code/Aureatelabs/ModuleName/view/frontend/layout directory.

<?xml version="1.0"?>
<page xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    	<referenceBlock name="header.links">
        	<block class="Magento\Framework\View\Element\Html\Link" name="custom-header-link">
                	<argument name="label" xsi:type="string" translate="true">Custom Header Link</argument>
                	<argument name="path" xsi:type="string">*/*/*</argument>
    	<referenceBlock name="top.links">
        	<block class="Magento\Framework\View\Element\Html\Link" name="custom-top-link">
                	<argument name="label" xsi:type="string" translate="true">Custom Top Link</argument>
                	<argument name="path" xsi:type="string">*/*/*</argument>

In the default.xml file, there is two referenceBlock we have defined

  • Header.links: To add custom link in header links
  • Top.links: To add custom link in Top links.

Here, we have passed two arguments

  • label: The label for anchor link that will display in frontend
  • path: The path of the anchor link. Here you can define the path of your page i.e: route/controller/index

After cache flush, you can see custom link in header links and top links.

If the customer is not logged in means for the guest user only custom header link will be shown.

If the customer is logged in then both custom header link and the top link will be shown.

Additional Information

Here, Magento\Framework\View\Element\Html\Link is core Magento block that is used to create a link. If you open Link.php file you will find these two functions

protected function _toHtml()
    	if (false != $this->getTemplate()) {
        	return parent::_toHtml();

    	return '<li><a ' . $this->getLinkAttributes() . ' >' . $this->escapeHtml($this->getLabel()) . '</a></li>';

	public function getHref()
    	return $this->getUrl($this->getPath());

If you want to add an external website link in your custom header or top link with path argument, it will be not possible.

So for the external website link, you have to create one custom block that extends \Magento\Framework\View\Element\Html\Link and define this block in default.xml file.

In default.xml file update the block name.

<referenceBlock name="header.links">
	<block class="Aureatelabs\ModuleName\Block\CustomLink" name="custom-header-link">
        	<argument name="label" xsi:type="string" translate="true">Custom Header Link</argument>

Next create CustomLink.php file.

namespace Aureatelabs\ModuleName\Block;

class CustomLink extends \Magento\Framework\View\Element\Html\Link
	public function getHref()
    	return '';

	public function getTarget()
    	return '_blank';

Here we have created two function named getHref() and getTarget().

  • getHref(): define external link here
  • getTarget(): I have added target=”_blank” attribute

So now when clicking on header link it will open Google in a new page. You can use different attribute too.

If you refer  \Magento\Framework\View\Element\Html\Link file you will find $allowedAttributes array variable.

protected $allowedAttributes = [
    	'onblur', // %attrs
    	'style', // %coreattrs
    	'dir', // %i18n
    	'onkeyup', // %events

You can use these attribute add prefix get and first letter capital from above attribute

Ex. getHref(), getTitle(), getOnclick() etc.

Speak your Mind

Post a Comment

Got a question? Have a feedback? Please feel free to leave your ideas, opinions, and questions in the comments section of our post! ❤️

* This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.