5

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

enter image description here

Improve this question
2

4 Answers 4

Reset to default
4

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!

Improve this answer
7
  • Thanks for the effort to explain it but is there a way without creating a module? Like just linking it via css or javascript?
    – PiedPiper
    Commented Jun 22, 2018 at 4:14
  • without module is not possible
    – Amit Bera ♦
    Commented Jun 22, 2018 at 4:17
  • Ah okay thanks btw. I don't know the module way because i created my whole website via css, javascript and xml only.
    – PiedPiper
    Commented Jun 22, 2018 at 4:19
  • if you want to add it via js, then simply add the <li> html using js and append it to the top menu bar. But this is not the correct way to do
    – Vivek
    Commented Jun 22, 2018 at 5:29
  • 2
    Your code showing home link on last of the menu, can you please let me know how to move it in first in the navigation menu
    – Purushotam Sharma
    Commented Mar 12, 2019 at 11:23
6

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>
Improve this answer
0

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>
Improve this answer
0

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>

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.