{"id":7306,"date":"2019-09-26T19:05:50","date_gmt":"2019-09-26T13:35:50","guid":{"rendered":"https:\/\/www.hiddentechies.com\/blog\/?p=7306"},"modified":"2019-10-04T11:20:10","modified_gmt":"2019-10-04T05:50:10","slug":"magento-2-add-top-link","status":"publish","type":"post","link":"https:\/\/www.hiddentechies.com\/blog\/magento-2\/magento-2-add-top-link\/","title":{"rendered":"Magento 2 – How to Add Top Link"},"content":{"rendered":"

Any website’s header is the perfect place to display the important links. Top Links block in Magento 2 is used to add links related to customer account like Login, Logout, My Account, My Wishlist etc.<\/p>\n

So, in this post I am going to explain how to add top link in magento 2.<\/p>\n

First, Add or Modify below content default.xml file<\/p>\n

<?xml version=\"1.0\"?>\r\n\r\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\r\n    <body>\r\n        <referenceBlock name=\"header.links\">\r\n            <block class=\"Ht\\Mymodule\\Block\\Toplink\" name=\"add-new-top-link\">\r\n                <arguments>\r\n                    <argument name=\"label\" xsi:type=\"string\" translate=\"true\">Top Link<\/argument>\r\n                    <argument name=\"path\" xsi:type=\"string\" translate=\"true\">top-link<\/argument>\r\n                <\/arguments>\r\n            <\/block>\r\n        <\/referenceBlock>\r\n    <\/body>\r\n<\/page><\/pre>\n
Now add the Block file Toplink.php for the custom Link.<\/p>\n
Path: app\/code\/Ht\/Mymodule\/Block\/Toplink.php<\/p>\n
<?php\r\n\r\nnamespace Ht\\Mymodule\\Block;\r\n\r\nclass Toplink extends \\Magento\\Framework\\View\\Element\\Html\\Link {\r\n\r\n\tprotected function _toHtml() {\r\n        if (false != $this->getTemplate()) {\r\n            return parent::_toHtml();\r\n        }\r\n        return '<li class=\"custom-top-link\"><a ' . $this->getLinkAttributes() . ' >' . $this->escapeHtml($this->getLabel()) . '<\/a><\/li>';\r\n    }\r\n}<\/pre>\n
Thats it. Now, Clear the cache the check for the change.<\/p>\n
If you do not want to use the custom Block then you can use Magento default Block. In this case you don’t need to add the Block file.<\/strong><\/p>\n
<?xml version=\"1.0\"?>\r\n\r\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\r\n    <body>\r\n        <referenceBlock name=\"header.links\">\r\n            <block class=\"Magento\\Framework\\View\\Element\\Html\\Link\" name=\"add-new-top-link\">\r\n                <arguments>\r\n                    <argument name=\"label\" xsi:type=\"string\" translate=\"true\">Top Link<\/argument>\r\n                    <argument name=\"path\" xsi:type=\"string\" translate=\"true\">top-link<\/argument>\r\n                <\/arguments>\r\n            <\/block>\r\n        <\/referenceBlock>\r\n    <\/body>\r\n<\/page><\/pre>\n
Now if you want to get or show link from your template file then you can do as below.<\/strong><\/p>\n
Add or Modify below content default.xml file<\/p>\n
<?xml version=\"1.0\"?>\r\n\r\n<page xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd\">\r\n    <body>\r\n        <referenceBlock name=\"header.links\">\r\n            <block class=\"Magento\\Framework\\View\\Element\\Html\\Link\" name=\"add-new-top-link\" template=\"Ht_Mymodule::toplink.phtml\" \/>\r\n        <\/referenceBlock>\r\n    <\/body>\r\n<\/page><\/pre>\n
Now add new template and add below code in that.<\/p>\n
<li class=\"custom-top-link\">\r\n    <a href=\"#\">Custom Top Link<\/a>\r\n<\/li><\/pre>\n
Thats it. Enjoy Magento 2!!<\/p>\n","protected":false},"excerpt":{"rendered":"
Any website’s header is the perfect place to display the important links. Top Links block in Magento 2 is used to add links related to customer account like Login, Logout, My Account, My Wishlist etc. So, in this post I am going to explain how to add top link in magento 2. First, Add or… <\/p>\n
Continue Reading<\/a><\/div>\n","protected":false},"author":1,"featured_media":7371,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[9,10,27],"_links":{"self":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7306"}],"collection":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/comments?post=7306"}],"version-history":[{"count":2,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7306\/revisions"}],"predecessor-version":[{"id":7311,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/posts\/7306\/revisions\/7311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media\/7371"}],"wp:attachment":[{"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/media?parent=7306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/categories?post=7306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hiddentechies.com\/blog\/wp-json\/wp\/v2\/tags?post=7306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}