Create Custom Admin Menu In Magento 2

In this tutorial we going to see how to add a custom admin menu in Magento 2, which shown on the left side of Admin Menu pages of Magento 2.

On frontend, we will have like this format (router_name)_(controller_folder)_(action_name). But in the admin menu, we have a admin router name (this can be customized) before which made Magento know this’s a Backend area.

Firstly, we will go through each and every structure of the admin menu and also check with how the action in each menu like. In this structure of the menu, you will see the level-0 on the left bar and the higher level is grouped and it is shown when you click on level-0 menu. For eg, this image is a menu of Stores. You will also see the Stores is a level-0 and show on the left bar. When we click on it, the sub-menu will show up – Setting, Attributes etc and that sub-menu has some sub-sub-menu also (Setting has All Stores, Configuration, Terms and Conditions, Order Status).

In Magento 2, we use the menu.xml to add this menu.

To understand more about menu in magento 2 we will do practice.

Lets do this practically, you need to follow step by step

Step 1: Create a new module called Techone_ Adminmenu

Create the namespace Techone in the path app\code.
Create the module name Adminmenu in the path app\code\Techone.
Create the file named registration.php in the path app\code\Techone\ Adminmenu

<?php
      Use \Magento\Framework\Component\ComponentRegistrar;
     ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Techone_Adminmenu', __DIR__);

Create the file name module.xml in the path app\code\Techone\ Adminmenu\etc

<?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="Techone_Adminmenu" >
      </module>
 </config>

End of step #1, I have been completed the step to create new module called Techone_ Adminmenu

Step 2: Declare Route

Route will define name for a module which can use in url to find the url and execute the controller action.
Create the new file named routes.xml in the path app\code\Techone\Adminmenu\etc\adminhtml
I put the routes.xml file in the folder named adminhtml, because I want these codes only to apply on the admin.

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

Step 3: Create menu.xml

Create the new file named menu.xml, in the path app\code\Techone\Adminmenu\etc\adminhtml\menu.xml

<?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>
    </menu>
</config>

Step 4: Add admin menu item

<?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="Techone_Adminmenu::mainmenu" title="Techone" module="Techone_Adminmenu" sortOrder="51" 
        	resource="Techone_Adminmenu::mainmenu"/>
        <add id="Techone_Adminmenu::menuone" title="Manage Posts" module="Techone_Adminmenu" sortOrder="10" action="techone_adminmenu/menuone" resource="Techone_Adminmenu::menuone" parent="Techone_Adminmenu::mainmenu"/>
        <add id="Techone_Adminmenu::menutwo" title="Configuration" module="Techone_Adminmenu" sortOrder="99" parent="Techone_Adminmenu::mainmenu" action="adminhtml/system_config/edit/section/mainmenu" resource="Techone_Adminmenu::menutwo"/>
    </menu>
</config>

In this we will create a level-0 menu named “Techone” and two sub-menus named “Manage Posts”, “Configuration”. In the menu.xml file define a collection of ‘add’ note which will add menu item to Magento backend.

Let’s explain some attributes:

• Id attribute is the identifier, unique string and follow the format: (Vendor_ModuleName)::(menu_description).
• Title attribute is the text which is display on the menu bar.
• Module attribute is defined module.
• sortOrder attribute is defined the position of menu, Display Lower value on top of menu.
• parent attribute is an Id of other menu node, this tell Magento that the menu is a child of another menu above example,in which we have parent=”Techone_ Adminmenu::mainmenu”, so we know this menu “Manage Posts” is a child of “Techone” menu and it will show inside of Techone menu.
• Action attribute define the url of the page which is menu link to. As we talk above, the url will be followed this format (router_name)(controller_folder)(action_name). – In this eg menu will link to the module Techone_ Adminmenu, controller Post, action Index
  Resource attribute is used to defined the ACL rule which the admin user must have in order to see, access this menu.

Step 4: Test and see the results

Run the command lines following:

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush –done

Check with the video you come to uderstand practically.