Magento 2 How to add Home link in navigation bar!

Question

How can i link my home page in the navigation bar(Home) button?

Answer 1

You can do it by creating a simple module:

Create registration file:

app/code/Magenik/NavLink/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magenik_NavLink',
    __DIR__
);

Create module.xml file:

app/code/Magenik/NavLink/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magenik_NavLink" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Ui"/>
        </sequence>
    </module>
</config>

Now let's create the di.xml file that will inject our plugin in the right place.

app/code/Magenik/NavLink/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Theme\Block\Html\Topmenu">
        <plugin name="navLinksTopmenu" type="Magenik\NavLink\Plugin\Block\Topmenu" sortOrder="0" />
    </type>
</config>

Create Plugin file:

app/code/Magenik/NavLink/Plugin/Block/Topmenu.php

<?php

namespace Magenik\NavLink\Plugin\Block;

use Magento\Framework\Data\Tree\NodeFactory;

class Topmenu
{

    /**
     * @var NodeFactory
     */
    protected $nodeFactory;

    /**
     * Initialize dependencies.
     *
     * @param \Magento\Framework\Data\Tree\NodeFactory $nodeFactory
     */
    public function __construct(
        NodeFactory $nodeFactory
    ) {
        $this->nodeFactory = $nodeFactory;
    }

    /**
     *
     * Inject node into menu.
     **/
    public function beforeGetHtml(
        \Magento\Theme\Block\Html\Topmenu $subject,
        $outermostClass = '',
        $childrenWrapClass = '',
        $limit = 0
    ) {
        $node = $this->nodeFactory->create(
            [
                'data' => $this->getNodeAsArray(),
                'idField' => 'id',
                'tree' => $subject->getMenu()->getTree()
            ]
        );
        $subject->getMenu()->addChild($node);
    }

    /**
     *
     * Build node
     **/
    protected function getNodeAsArray()
    {
        return [
            'name' => __('Home'),
            'id' => 'home',
            'url' => '/',
            'has_active' => true,
            'is_active' => true
        ];
    }
}

That is it!

Answer 2

I have done by just overriding this file in my custom theme.

app/design/frontend/Vendor/theme/Magento_Theme/templates/html/topmenu.phtml

<?php
    $columnsLimit = $block->getColumnsLimit() ?: 0;
    $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit);
    $currentUrl = $block->getCurrentUrl();
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');
?>

<nav class="navigation" role="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <li class="level0 home <?php if($currentUrl == '/'): ?>active<?php endif; ?>"><a href="<?php echo $storeManager->getStore()->getBaseUrl(); ?>" title="<?php echo __('Home') ?>" class="level-top"><span><?php echo __('Home') ?></span></a></li>
        <li class="level0 <?php if($currentUrl == '/testlink'): ?>active<?php endif; ?>"><a href="<?php echo $storeManager->getStore()->getBaseUrl().'testlink'; ?>" title="<?php echo __('Test Link') ?>" class="level-top"><span>Test Link</span></a></li>
        <?php echo $_menu; ?>
    </ul>
</nav>

Answer 3

Added a new block in my default.xml targeting Catalog menu for my custom theme and reordered with CSS .

<referenceBlock name="catalog.topnav">
        <!-- Home Page Link -->
        <block class="Magento\Framework\View\Element\Html\Link" name="home.link" before="-" >
            <arguments>
                <argument name="label" xsi:type="string"  translate="false">Home</argument>
                <argument name="path" xsi:type="string" translate="false">/</argument>
            </arguments>
        </block>
    </referenceBlock>

Answer 4

Added a template to app/design/frontend///Magento_Theme/templates/html/topmenu.phtml

<nav class="navigation" data-action="navigation">
<ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
    <li class="level0"><a href="<?= $block->escapeUrl($block->getUrl('')) ?>"><?= __('Home') ?></a></li>
    <?= /* @noEscape */ $_menuHtml?>
    <?= $block->getChildHtml() ?>
    <li class="level0"><a href="#"><?= __('About') ?></a></li>
</ul>