4

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

enter image description here

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!

  • 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 Jun 22 '18 at 4:14
  • without module is not possible – Amit Bera Jun 22 '18 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 Jun 22 '18 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 Jun 22 '18 at 5:29
  • 1
    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 Mar 12 at 11:23
4

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></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>
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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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