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

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="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="custom-header-link">
            	<arguments>
                	<argument name="label" xsi:type="string" translate="true">Custom Header Link</argument>
                	<argument name="path" xsi:type="string">*/*/*</argument>
            	</arguments>
        	</block>
    	</referenceBlock>
    	<referenceBlock name="top.links">
        	<block class="Magento\Framework\View\Element\Html\Link" name="custom-top-link">
            	<arguments>
                	<argument name="label" xsi:type="string" translate="true">Custom Top Link</argument>
                	<argument name="path" xsi:type="string">*/*/*</argument>
            	</arguments>
        	</block>
    	</referenceBlock>
	</body>
</page>

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">
    	<arguments>
        	<argument name="label" xsi:type="string" translate="true">Custom Header Link</argument>
    	</arguments>
	</block>
</referenceBlock>

Next create CustomLink.php file.

<?php
namespace Aureatelabs\ModuleName\Block;

class CustomLink extends \Magento\Framework\View\Element\Html\Link
{
	public function getHref()
	{
    	return 'https://www.google.com/';
	}

	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 = [
    	'href',
    	'title',
    	'charset',
    	'name',
    	'target',
    	'hreflang',
    	'rel',
    	'rev',
    	'accesskey',
    	'shape',
    	'coords',
    	'tabindex',
    	'onfocus',
    	'onblur', // %attrs
    	'id',
    	'class',
    	'style', // %coreattrs
    	'lang',
    	'dir', // %i18n
    	'onclick',
    	'ondblclick',
    	'onmousedown',
    	'onmouseup',
    	'onmouseover',
    	'onmousemove',
    	'onmouseout',
    	'onkeypress',
    	'onkeydown',
    	'onkeyup', // %events
	];  

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

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

  • Share :