X
    Categories: Magento 2 BlogsMagento Tutorials, Tips and Guides

How to Add Custom Admin Menu In Magento 2

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! 🙂

Fayyaz Khattak: Fayyaz is a Magento Community Manager at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. Fayyaz is a food lover and enjoys driving. You can email him at m.fayyaz@cloudways.com