Magento developers look forward to new and modern features in Magento 2 to get the most out of the popular CMS right out-of-the-box. When we talk about Magento 2 development, there is always a need for custom options that are required to be placed somewhere in the platform. While creating a Magento 2 module, I needed to add a custom admin menu in the Magento 2 Admin Panel.
To solve this issue, I spent some time on it and found a solution. In this blog post, I will try to describe how to add a custom admin menu in Magento 2 briefly. Just to accomplish this job, I will be creating a custom module. It will be like a dummy admin menu. When you click on it, nothing will happen.
Let’s start with creating a Magento 2 module. Here is an excellent article was written on how to create a simple module in Magento 2. I will be using Cloudways as a Module’s Namespace and Adminmenu as Module’s Name.
Create a new registration.php file in Magento2Root/app/code/Cloudways/Adminmenu/ and add the code below to it:
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Cloudways_Adminmenu', __DIR__ );
Now to declare the module, create a module.xml file in Cloudways/Adminmenu/etc/ with the following code:
<?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="Cloudways_Adminmenu" setup_version="1.0.0"></module> </config>
Admin menu is handled by the file menu.xml. This file consists of <config>, <menu> and <add> elements. <menu> element may consist of multiple <add> elements as well.
Create a new file menu.xml in Cloudways/Adminmenu/etc/adminhtml/ and add the following content to it:
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd"> <menu> <add id="Cloudways_Adminmenu::first_level_demo" title="Cloudways Admin Menu" module="Cloudways_Adminmenu" sortOrder="20" resource="Magento_Backend::content" /> <add id="Cloudways_Adminmenu::second_level_demo" title="Sub Menu" module="Cloudways_Adminmenu" sortOrder="1" action="menuitem/index/index" parent="Cloudways_Adminmenu::first_level_demo" resource="Magento_Backend::content" /> </menu> </config>
As you can see the menu.xml file, we have defined two <add> element with attributes. First one is used for first level menu and the second one is for the second level menu with additional actions and parent attributes.
Here is an explanation of each attribute:
id – unique identifier
title – title of the menu that will be showing in the admin
module – indicates the module
sortOrder – prioritize the place of menu
resource – the rule to identify which admin user see and access this menu
action – link to the specified admin controller
parent – defines on which first level menu it depends
Finally, everything is ready that will add custom admin menu in Magento 2 Admin Panel. To enable and activate the custom module, run the following CLI commands:
rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* php bin/magento cache:clean php bin/magento cache:flush php bin/magento setup:upgrade php bin/magento setup:di:compile php bin/magento indexer:reindex
In the end, it will look something like this:
That’s all. The custom admin menu in Magento 2 should now be visible. I hope now you have a fair idea about the concept of using menu.xml in Magento 2. If you have any questions, please leave a comment below. If you like this blog post, thank me by sharing it with your Magento fellows using Facebook, Google+, or Twitter. Happy learning! 🙂