This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

How to Add Custom Admin Menu In Magento 2

June 3, 2021

3 Min Read

One of the best things about being a Magento developer is looking forward to updated  Magento 2 features. This is especially true considering the need for custom options along with the Magento platform. For instance, while creating a Magento 2 module, I had to add a custom Magento 2 admin menu in the admin panel.

In this blog post, I’ll create a custom module to show you how I was able to do this in Magento 2. It’s a dummy Magento 2 admin menu, so nothing’s going to happen when you click on it. The basic reason to create admin menu in Magento 2 is that developers can easily route or navigate to a specific module to utilize the functionalities to the store.

Let’s start with creating a Magento 2 module. I will be using Cloudways for the Module’s Namespace and Magento admin menu as the Module’s Name.

Create a New Registration.php

To create a registration.php you need to navigate to the 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__

);

Scalable, Super Fast, & Secure Magento Hosting

Our clients love us because we never compromise on security, performance and support.

Create a Module.xml

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>

After creating the module.xml the step:1 to add the custom Magento 2 admin menu has completed. 

Declare Route

The route defines the name for a module. This allows the URL to be found and the controller action to be executed. For that, you need to create the new file named routes.xml in the path app\code\Cloudways\Adminmenu\etc\routes.xml

I added the routes.xml file in the folder named adminhtml, because I want these codes only to apply to the admin.

?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:app/etc/routes.xsd">
  <route id="admin">
  <route id="admin" frontName=”mainmenu”>
  <module name="Cloudways_Adminmenu"/>
</router>
</router>
</config>

Create a New Menu Item

The Magento 2 admin menu is handled by the file menu.xml. This file consists of <config>, <menu> and <add> elements. The <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 in the menu.xml file, we have defined two <add> elements with attributes. The first is used for the first level menu, and the second for the second level menu with additional actions and parent attributes.

Book a Personalized Cloudways Product Demo With One of Our Expert

Explanation of Attributes

  • idunique identifier
  • titlethe title of the menu that will be showing up in the admin
  • module indicates the module
  • sortOrderprioritize the place of menu
  • resourcethe rule to identify which admin user can see and access this menu
  • actionlink to the specified admin controller
  • parentdefines on which first level menu it depends

Clear the Magento Cache!

You’ve now made the necessary preparations to create admin menu in Magento 2 in the Admin Panel. To enable and activate the custom module, run the following Magento 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:

magento 2 admin menu

And That’s All! 

The custom admin menu in Magento 2 should now be visible once you’ve followed the steps outlined above. 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.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Great speed, features, knowledgebase, dashboard, UX and fast, expert support. Very happy!”

Stefan [Management Consultant]

Fayyaz Khattak

Fayyaz, a passionate Motorbike tourist, works as a Team Lead — Magento Community at Cloudways - A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. You can contact him at [email protected]

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

x

For 4 Months

Promo: BFCM2021
  • 28

days

  • 28

Hours

  • 28

Mins

  • 28

Secs