How to Add Custom Admin Menu In Magento 2

In this article, We're going to explain you How to Add Custom Admin Menu In Magento 2. After following few simple steps of this article you are able to easily add your custom admin menu.

In our previous articles we've learn:

• How To Create Magento 2 Module
• How to Create Custom Database in Magento 2
• How to Insert Sample Data in Magento 2
• How to Create Model, Resource Model, and Collection in Magento 2

I hope you have understood and applied those steps easily. Now, before we create a UI Compoment Grid we need to create one custom admin menu for navigate to our custom grid. So, in this article, we will see how to create custom admin menu in Magento 2.

Let's get started!!

Follow the simple steps which are listed below.

First of all we need to Declare Route. To know more about Magento routing please review Magento official guide. As of now we are going to create route for admin area so we need to create routes.xml file under adminhtml folder.

Step 1: Create routes.xml at app/code/Devhooks/HelloWorld/etc/adminhtml/ and paste the below code.

saveCopyzoom_out_map
<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
    <router id="admin">
        <route id="helloworld" frontName="helloworld">
            <module name="Devhooks_HelloWorld" before="Magento_Backend"/>
        </route>
    </router>
</config>

Step 2: Create menu.xml file at app/code/Devhooks/HelloWorld/etc/adminhtml/ and paste the below code.

saveCopyzoom_out_map
<?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="Devhooks_HelloWorld::helloworld" title="Vendor" module="Devhooks_HelloWorld" sortOrder="10"
             resource="Devhooks_HelloWorld::helloworld"/>
        <add id="Devhooks_HelloWorld::grid" title="Manage Grid" module="Devhooks_HelloWorld" sortOrder="10"
             action="helloworld/index/index" resource="Devhooks_HelloWorld::grid" parent="Devhooks_HelloWorld::helloworld"/>
    </menu>
</config>

Explanation of the entities used in the above code:

• id: is used as the unique identifier of a menu.
• title: the menu title that will be displayed in the admin menu.
• module: the module that I have created (Demo_Mymenu).
• sortOrder: is used to set the placement of menu.
• resource: a rule to identify which admin user can see this menu.
• action: is used to link an admin controller
• parent: is used to define which menu level it depends on.

Step 3: Now, open Command line in folder root of magento and run both commands

saveCopyzoom_out_map
php bin/magento cache:clean

Log in to the admin of your Magento 2 and you will see the new menu like the below screenshot.

That's it.

We have successfully created new custom menu, we hope this article helped you to know How to Add Custom Admin Menu In Magento 2. Now, let's move to the next step to know How to Create UI Component Grid In Magento 2 .

Stay Tuned...

Bookmark it for your future reference. Do comment below if you have any other questions or doubts.

P.S. Do share this post with your team.

Special thanks to Rutvik Monpara, He helped me a lot to write a series of How to Create UI Component Grid and Form in Magento 2.