Adding custom menu item inside Magento2

From what we’ve introduced while talking about adding a footer link to our Magento2 store, we will dig a little further so anyone can understand more precisely how to deal with layouts & templates using Magento 2.

Of course we strongly advice you to read all the details covered on the dev doc of Magento but we like to practice here and share our code with you.

Analyse the frontend code using a browser

When you are starting from Zero, and you do know what you want, the first thing to do is analyzing the right spot where you plan to make some change.

Today we need to add a custom link at the right of our Magento Store menu. As you may know, by default Magento2 generates the menu links every time you add a new category under the main one. If you don’t want to use an external extension and wish to include your own customization then this short tutorial is for you.

First, launch your store frontend using your favorite browser and get the source code which covers the menu area as follow :

source code menu links magento2 store

If you enable the “red lines” as in our previous tutorial then you will notice that the menu’s layout is defined under the module-theme directory and more precisely in the file named :

vendor/magento/module-theme/view/frontend/layout/default.xml

The above file’s content around the navigation parameters is :

<block class="Magento\Framework\View\Element\Template" name="navigation.sections" before="-" template="Magento_Theme::html/sections.phtml">
<arguments>
<argument name="group_name" xsi:type="string">navigation-sections</argument>
<argument name="group_css" xsi:type="string">nav-sections</argument>
</arguments>
<block class="Magento\Framework\View\Element\Template" name="store.menu" group="navigation-sections" template="Magento_Theme::html/container.phtml">
<arguments>
<argument name="title" translate="true" xsi:type="string">Menu</argument>
</arguments>
<block class="Magento\Theme\Block\Html\Topmenu" name="catalog.topnav" template="html/topmenu.phtml" ttl="3600" before="-"/>
</block>
<block class="Magento\Framework\View\Element\Text" name="store.links" group="navigation-sections">
<arguments>
<argument name="title" translate="true" xsi:type="string">Account</argument>
<argument name="use_force" xsi:type="boolean">true</argument>
<argument name="text" xsi:type="string"><![CDATA[<!-- Account links -->]]></argument>
</arguments>
</block>

From the layout is initiated the following template :

vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml

The content of the file :

<?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?>
<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit) ?>

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

Let’s now modify the template in order to add a custom link.

Adding custom link to Magento 2 store menu

Put yourself in developer mode as stated in the dev doc of Magento2.

$ bin/./magento deploy:mode:set developer

We know the module name (ie : magento-theme) so we will use our own theme to override the template :

  1. Create a folder named Magento_Theme inside your them folder (ie : app/design/frontend/YourName/themename/Magento_Theme)
  2. Create the following structure under the Magento_Theme directory : /templates/html
  3. Upload the file topmenu.phtml under Magento_Theme/templates of your theme directory

We are now ready to make some changes in our file.

As an example we will just add html content just above the ul ending tag :


<li class="level0 nav-8 last level-top ui-menu-item" role="presentation"><a href="yoururl" class="level-top ui-corner-all" id="ui-id-9" tabindex="-1" role="menuitem"><span>A TITLE</span></a></li>

When you override a template using the same name, then follow these steps to apply the changes :

  1. delete all files inside pub/static/frontend
  2. delete all files in var/view_preprocessing
  3. reload the page

You can now get yourself back in production mode.

A new link should be visible at the right of your menu, check this :

Menu item in Magento2 frontend

“Le Blog” leads to an external url.

You may add any type of url here and use any style also.

The rendering is also responsive as we respect the theme by adding identical li tags.

 

I hope you enjoyed the tutorial and you are now able to add any custom menu items within your Magento2 frontend store.

Next we will see what we can do with the footer layout.

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: