Magento 2 – Navigation Links for CMS Pages

magento2navigationtoplinks

I've been trying to figure out how to add links to the top navigation for Magento 2.

In 1.x we'd just URL rewrites, however, that doesn't seem to work in Magento 2.x at this point. I added a new category Home. Then, I went to: Marketing > URL Rewrites, and edited the URL rewrite (changing the Redirect Type to 301) and saved it. Next, I clicked Add URL Rewrite, type Custom and used request path of "catalog/category/view/id/23" and target path /. I tried the redirect type as none and 301.

Is this done differently in Magento 2? Or is there another way to add links to the top navigation menu ? My problem is, I don't just need to add one link, I need to add multiple links, and they need to be drop-downs.

Best Answer

1- Create topmenu.phtml in design/frontend/magento/you_theme/Mageto_Theme/templates/html/topmenu.phtml

<?php
/**
 * Top menu for store
 *
 * @see \Magento\Theme\Block\Html\Topmenu
 */
?>
<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

<nav class="navigation" role="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?php /* @escapeNotVerified */ echo $_menu; ?>
        something...
    </ul>
</nav>

2- Refresh cache

Related Solutions

How to Render Two Root Categories in Navigation in Magento

My question would be why are you trying to use two root categories in the same store? A root category is intended to be just that, the parent of all categories which are available for use on a given store. It's a means of access control, URL construction and the list goes on. There are a vast number of places you would need to (literally) hack the core to make this work all around. Taking this route you will run into nuances which will most likely come back to bite you.

What I would suggest is to simple use one root category as intended by Magento and move all sub-categories you wish to show up to be children of it. Break down the hierarchy beneath the root. If you need to use this same structure for multiple stores which have the same product set, you can set the same root as the root of multiple stores when creating them in the admin.

Sometimes the best way to solve problems like this is not jumping into the code and changing stuff up, but rather looking at the approach being taken and finding another way to accomplish your goals without needing to make such awkward changes to the core. You will benefit now and in the long run by using this methodology. In the short-term you will benefit from less modifications and get up and running more quickly, and in the long-run you will also benefit from less modifications because when it comes time to upgrade you won't have to port intrusive changes to the way the core functions to the newer versions of Magento.

Magento 1.9 RWD Theme – Add New Links to Top Links

First copy topmenu.phtml from

/app/design/frontend/rwd/default/template/page/html/

Save this file as topmenu.phtml to

/app/design/frontend/YOUR PACKAGE/YOUR THEME/template/page/html/

Edit this file within lines 38-40, paste the following:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home-link')->toHtml(); ?>

To create:

<ol class="nav-primary">
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('home-link')->toHtml(); ?>
<?php echo $_menu ?>
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('post-menu-links')->toHtml(); ?>
</ol>

Save and re-upload this file.

Create a CMS > Static Block, named home-link enter the following into your block (Hide Editor, as needed):

<li class="level0 nav-1 parent"><a href='{{config path="web/unsecure/base_url"}}' title='Home Page' class='level0'>Home</a></li>

Note: I leave all of the class names consistent with 1.9. Feel free to adjust class names as needed.

Save your new Static Block.

Create a CMS > Static Block, named post-menu-links Enter the following into your block (Hide Editor, as needed):

<li class="level0 nav-1 parent"><a href="CUSTOMPATH-1.HTML" title="LINK TITLE #1" class="level0">LINKNAME #1</a></li>
<li class="level0 nav-1 parent"><a href="CUSTOMPATH-2.HTML" title="LINK TITLE #2" class="level0">LINKNAME #2</a></li>
<!--  and so on, as needed ...  -->

Save your new Static Block.

Be sure to clear the cache and refresh your browser.

Best Answer

Related Solutions

How to Render Two Root Categories in Navigation in Magento

Magento 1.9 RWD Theme – Add New Links to Top Links

Related Topic