Magento 2 How to add Home link in navigation bar!
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>
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!