How to Create Admin Menu Item in Magento 2

In this article, I am going to show you how to create an admin menu in Magento 2.

Follow the below steps to create an admin menu,

  • Create a new module
  • Create a new menu item
  • Create admin controller
  • Create a route configuration

Create New Module:

Here we are going to create a new custom module based on Magento 2 structure for adding a new admin menu.

Path: <Magento 2 root directory>/app/code/BlogTreat/CustomMenu/

Create a module.xml file in the below file path to define the new module,

File Path: app/code/BlogTreat/CustomMenu/etc/module.xml

<?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="BlogTreat_CustomMenu" setup_version="1.0.0">
    </module>
</config>

Next, create a registration.php file in the below file path,

File Path: app/code/BlogTreat/CustomMenu/registration.php

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

Create New Menu Item:

Menus are configured by the file menu.xml which is located in module’s etc/adminhtml folder.

File Path: app/code/BlogTreat/CustomMenu/etc/adminhtml/menu.xml

In this example, we will create the main menu called “FAQ” and two sub-menus named “Manage Questions” and “Configuration”.

<?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="BlogTreat_CustomMenu::faq" title="FAQ" module="BlogTreat_CustomMenu" sortOrder="20" resource="BlogTreat_CustomMenu::faq"/>
        <add id="BlogTreat_CustomMenu::questions" title="Manage Questions" module="BlogTreat_CustomMenu" sortOrder="10" action="custommenu/questions" resource="BlogTreat_CustomMenu::questions" parent="BlogTreat_CustomMenu::faq"/>
        <add id="BlogTreat_CustomMenu::faq_configuration" title="Configuration" module="BlogTreat_CustomMenu" sortOrder="20" parent="BlogTreat_CustomMenu::faq" action="adminhtml/system_config/edit/section/faq" resource="BlogTreat_CustomMenu::faq_configuration"/>
    </menu>
</config>

Explanation of the directive’s attributes is as follows:

  • id: This is node identifier. It’s a unique string and should follow the format: {Vendor_ModuleName}::{menu_item_description}.
  • title: This is the text which will be shown on the menu bar.
  • module: This is defined the module which this menu belongs to.
  • sortOrder: This is defined as the position of the menu. The lower value will display on top of the menu.
  • parent: This is an Id of parent menu.
  • action: URL which is redirected when click on the menu, the URL will be followed this format {router_name}/{controller_folder}/{action_name}.
  • resource: This is used to define the ACL rule, admin can use this to set permissions for any users.

Create Admin Controller:

Create an admin controller file in the below path,

File Path: app/code/BlogTreat/CustomMenu/Controller/Adminhtml/Questions/Index.php

<?php
namespace BlogTreat\CustomMenu\Controller\Adminhtml\Questions;
 
class Index extends \Magento\Backend\App\Action
{
    /**
     * Custom Menu test controller page.
     *
     * @return \Magento\Backend\Model\View\Result\Page
     */
    public function execute()
    {
        echo __('Custom Menu Test Controller.');
    }
 
    /**
     * Check Permission.
     *
     * @return bool
     */
    protected function _isAllowed()
    {
        return $this->_authorization->isAllowed('BlogTreat_CustomMenu::questions');
    }
}

Create Route Configuration:

Finally, create a route configuration file in the following file path,

File Path: app/code/BlogTreat/CustomMenu/etc/adminhtml/routes.xml

<?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="custommenu" frontName="custommenu">
            <module name="BlogTreat_CustomMenu" />
        </route>
    </router>
</config>

After completing the above steps, go to the [Magento 2 root]/bin directory and run the below command in your CLI to enable the new extension,

php magento module:enable BlogTreat_CustomMenu

Then, run the below command in CLI to upgrade the setup,

php magento setup:upgrade

Then, clear the cache and check your admin panel.

Reference image:

How to Create Admin Menu Item in Magento 2

Hope this helps.

Leave a Reply

Your email address will not be published. Required fields are marked *