Adobe Commerce Developers often need to work on the frontend side. For example, we must add links on the main and top menus.
It is all about front-end customisation. We customise the menu, category layer navigation, top menu, mini cart, Product Page, Category Page, Checkout Page, etc.
Top Links are an essential part of the front end, it contains valuable information. It is also an eye-catching part, just like the main menu.
We can define a cms page, a custom page, and external links on top links. We also can add conditions for admin approval from the configuration. For example, it must be visible only if the admin approves it. We must use the ifconfig state with section name/group name /field name for that.
Adding top links from the theme and a module is pretty straightforward. We just need to add the default.xml to show the full link on all the pages across the website, or we can use a specific layout XML file to deliver the top link of a particular page.
So Let’s check out how we can add top links across the website.
Magento 2 How to Add Top Link
This Post from SbDevBlog explains how we can add a top link to our Magento Frontend.
Define Block in your layout XML
I have used default.xml to show the link on all the pages.
Create default.xml
VendorName/Module/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="top.link.name">
<arguments>
<argument name="label" xsi:type="string" translate="true">Name Of Link</argument>
<argument name="path" xsi:type="string" translate="true">Path to redirect</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>We must pass our block with class Magento\Framework\View\Element\Html\Link with the appropriate name to the block with the name header.links.
We need to pass arguments; among them label is in the Name of the Link, and the path is to define the URL path on which redirection will happen on clicking the link.
Example:
<?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="sbdev_blog_link">
<arguments>
<argument name="label" xsi:type="string" translate="true">SbDevBlog Products</argument>
<argument name="path" xsi:type="string" translate="true">sbdevblog/products/view</argument>
</arguments>
</block>
</referenceBlock>
</body>
</page>
Thanks for reading the post – Magento 2 How to Add Top Link. Please give your valuable feedback using the comment section. Also, please subscribe and share the SbDevBlog with your connection. Thank You!
Note: Please verify the code of this blog and the relevant git repository before using it in production.
🙂 HAPPY CODING 🙂
“Have a fun with code, Thanks for visiting my blog”
—Sb Dev Blog