Thursday , June 20 2024
Home > Magento Tips & News > Magento 2 Tutorials > Content > How to Add Top Link in Magento 2

How to Add Top Link in Magento 2

Magento 2 Add link to top menu

By default, Magento provides users with a Header CMS that contains Top links such as Customer info, Sign in, Create an Account, Currency options. These links can help customers easily find basic information when they visit the website. However, Magento doesn’t have any button to let admin quickly add another link to the bar. 

This is the default top bar. 

default-top-bar

Here are the guidelines with 4 steps that help you do it. To illustrate, we’ll add a link https://www.magezon.com to “Magezon” as an anchor text.

Step 1: Add default.xml file

Add default.xml file into path: app/code/Magezon/Tutorial/view/frontend/layout with the content below:

<?xml version="1.0"?>
<!--
/**
 * Magezon
 *
 * This source file is subject to the Magezon Software License, which is available at https://magezon.com/license/.
 * Do not edit or add to this file if you wish to upgrade to newer versions in the future.
 * If you wish to customize this module for your needs.
 * Please refer to https://www.magezon.com for more information.
 *
 * @category  Magezon
 * @package   Magezon_Tutorial
 * @copyright Copyright (C) 2021 Magezon (https://magezon.com)
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="header.links">
            <block class="Magezon\Tutorial\Block\Link" name="magezon-tutorial-add-new-header-link" template="Magezon_Tutorial::newlink.phtml"/>
        </referenceBlock>
    </body>
</page>
  • Note:  You can always add/modify any block using “referenceBlock” và name=”Block_Name”, not just for “header.links”.
You may also like:
How to Add a Link to My Account Menu in Magento 2
Magento CMS: A Comprehensive Overview
The Complete Guide to Magento 2 Media Gallery
Beginner‘s Guide to Magento Media Folder
How to Upload Image in Magento 2

Create class Link.php by path : Magezon\Tutorial\Block with the content below:

<?php
/**
 * Magezon
 *
 * This source file is subject to the Magezon Software License, which is available at https://www.magezon.com/license
 * Do not edit or add to this file if you wish to upgrade to the newer versions in the future.
 * If you wish to customize this module for your needs.
 * Please refer to https://www.magezon.com for more information.
 *
 * @category  Magezon
 * @package   Magezon_Tutorial
 * @copyright Copyright (C) 2021 Magezon (https://www.magezon.com)
 */

namespace Magezon\Tutorial\Block;

use Magento\Framework\View\Element\Template;

class Link extends Template
{
    protected $_template = 'Magezon_Tutorial::newlin.phtml';

    protected function _toHtml()
    {
        $this->setNewUrl("https://www.magezon.com/");
        $this->setNewTitle("Magezon");
        return parent::_toHtml();
    }
}

Create template newlink.phtml by path: Magezon\Tutorial\view\frontend\templates that has the content below:

<?php
/**
* @var Magezon\Tutorial\Block\Link $block
*/
?>
<li>
    <a class="mgz-tutorial" href="<?= $block->getNewUrl() ?>" ><?= $block->getNewTitle() ?> </a>
</li>

Step 4: Flush Cache and reload the page

Here’s how the final result looks like.

Magento 2 add link to top menu - After

Wrap It Up

That’s the complete tutorial of Magento 2 adding a link to top menu. We’re very curious about what kind of content you wanna see in the next post. Comment down to let us know!

Looking to level up your Magento store for sales boost? Then, you should visit Magezon.

Optimize Your Magento Store With Powerful Extensions

Looking for fast, efficient and well-coded extensions to build or optimize your Magento stores for sales boosting? Then visit Magezon website and grab necessary add-ons for yours today!

About Alice Dinh

Alice Dinh
Alice is a writer at Magezon. She is on a mission to help readers learn about Magento and e-commerce to grow their online business. A chocolate fanatic once in a while.

Check Also

How to Create a Halloween Landing Page in Magento

It’s Halloween today. We’re gonna show you how to create a Halloween landing page using …

Leave a Reply