CREATING A MENU ITEM IN MAGENTO 2 ADMIN PANEL

Hello there! What’s a website without menus? In contemplative times with my coffee, I do think that one day we might get to a WWW revolution wherein clever UI finds a way to browse a website without a menu, but we’re quite far from that. Unless that happens, creating menus is perhaps the best way to navigate through a website. When you’re working on a new Magento 2 module, a menu becomes inevitable in order to link/navigate to your module’s new layouts.

 This is the first post in a series of tutorial posts wherein we’ll teach you to create a working menu in Magento 2 – quick and easy!

Without further wait, let’s delve into the concepts of creating menu items in the admin panel. The scope of this post is to create Admin Panel Menu items. The controllers and action will be covered in the upcoming tutorials. So stay tuned ;) we’ll be putting up those links right here!

In this tutorial, you’ll create a menu item that looks like this:

Here’s how we did it

Kick-start a new Magento 2 module with the following files:

Path: app/code/Velanapps/Testing/registration.php
<?php
\Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE,
'Velanapps_Testing',
__DIR__ );

Path: app/code/Velanapps/Testing/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
 <module name="Velanapps_Testing'" setup_version="1.0.0">
 </module>
</config>

Now that we have our modules created,let’s create our menu.xml file where we’ll be specifying the menu items that are required for our module:

Path: app/code/Velanapps/Testing/etc/adminhtml/menu.xml
<?xml version="1.0"?>
<config xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance xsi:noNamespaceSchemaLocation="../../../Backend/etc/menu.xsd">
 <menu>
<add id="Velanapps_Testing::velanapps" title="VelanApps" module="Velanapps_Testing" sortOrder="30" resource="Velanapps_Testing::velanapps"/>
<add id="Velanapps_Testing::testing_group" title="Velanapps Group" module="Velanapps_Testing" sortOrder="10" parent="Velanapps_Testing::velanapps" resource="Velanapps_Testing::testing_group"/>
<add id="Velanapps_Testing::testing_menu1" title="Testing Menu 1" module="Velanapps_Testing" sortOrder="10" parent="Velanapps_Testing::testing_group" action="front_name/controller/action1" resource="Velanapps_Testing::testing_menu1"/>
<add id="Velanapps_Testing::testing_menu2" title="Testing Menu 2" module="Velanapps_Testing" sortOrder="10" parent="Velanapps_Testing::testing_group" action="front_name/controller/action1" resource="Velanapps_Testing::testing_menu2"/>
 </menu>
</config>

Note how “resource” from the top-level menu item becomes the parent value for the next level menu item. While using this code, make sure you replace the action attribute with the controller and action that needs to be opened when these menu items are clicked (or wait for our second post).

In our example, we have 3 primary nodes:

The first one being the Parent menu item and the last one being the Menu Itemsthemselves (Testing Menu 1 and Testing Menu)

Our second node, is “VelanApps Group”, which is used to group the last-level menu items. You can have multiple groups in a single menu (you alreadyknew that). Now, you know a simple way to create menus in Magento 2. Watch out for our step 2 tutorial wherein we’ll teach you about controllers and actions.

Did you try this? Did it work for you? Let us know in the comments. If you’re a developer experimenting with Magento 2 and this didn’t work for you, don’t sweat because we’d be glad to help you out!

That apart, if you’re trying to create your own Magento Application and are trying to learn how to create menus in Magento 2, we don’t want to discourage you, but keep in mind that expert help is just a click away. Just letting you know that we can handle this for you while you go sell! You play the game and we’ll set the field. Call us @ +1 516 717 2049.