Crafting Custom Admin Routes and Menus in Magento 2: A Complete Guide

Creating custom admin routes and menus in Magento 2 is essential for extending the admin panel with new functionalities. This guide will walk you through the process of setting up custom admin routes, adding menu items, and configuring ACL (Access Control List) to manage permissions effectively.

Why Customize Admin Routes and Menus?

  1. Enhance Functionality: Add new features and tools directly to the Magento admin panel.
  2. Improve Usability: Customize the admin interface to better suit business needs.
  3. Secure Access: Use ACL to ensure that only authorized users can access certain features.

Step-by-Step Guide to Creating Admin Routes and Menus:

Step 1: Define Admin Route (routes.xml)

Create the etc/adminhtml/routes.xml file:

<?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="custom_admin" frontName="customadmin">
            <module name="Vendor_Module" before="Magento_Backend"/>
        </route>
    </router>
</config>

Step 2: Create Admin Controller

Create the Controller/Adminhtml/Index/Index.php file:

<?php
namespace Vendor\Module\Controller\Adminhtml\Index;

use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;

class Index extends Action
{
    protected $resultPageFactory;

    public function __construct(Context $context, PageFactory $resultPageFactory)
    {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        $resultPage->getConfig()->getTitle()->prepend(__('Custom Admin Page'));
        return $resultPage;
    }
}

Step 3: Add Admin Menu Item (menu.xml)

Create the etc/adminhtml/menu.xml file:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Menu/etc/menu.xsd">
    <menu>
        <add id="Vendor_Module::main_menu" title="Custom Menu" module="Vendor_Module" sortOrder="100" parent="Magento_Backend::content"/>
        <add id="Vendor_Module::submenu" title="Sub Menu" module="Vendor_Module" sortOrder="10" action="customadmin/index/index" resource="Vendor_Module::submenu" parent="Vendor_Module::main_menu"/>
    </menu>
</config>

Step 4: Define ACL (acl.xml)

Create the etc/acl.xml file to manage permissions:

<?xml version="1.0"?>
<acl xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <resources>
        <resource id="Magento_Backend::admin">
            <resource id="Vendor_Module::main_menu" title="Custom Menu" sortOrder="100" />
            <resource id="Vendor_Module::submenu" title="Sub Menu" sortOrder="10" />
        </resource>
    </resources>
</acl>

Step 5: Create Layout and View Files

Create the view/adminhtml/layout/customadmin_index_index.xml file for layout configuration:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Vendor\Module\Block\Adminhtml\Index" name="custom_admin_page" template="Vendor_Module::index.phtml"/>
        </referenceContainer>
    </body>
</page>

Create the Block/Adminhtml/Index.php file:

<?php
namespace Vendor\Module\Block\Adminhtml;

use Magento\Backend\Block\Template;

class Index extends Template
{
    protected function _prepareLayout()
    {
        $this->pageConfig->getTitle()->set(__('Custom Admin Page'));
        return parent::_prepareLayout();
    }
}

Create the view/adminhtml/templates/index.phtml file for the template:

<h1><?= /* @noEscape */ __('Welcome to Custom Admin Page!') ?></h1>
<p><?= __('This is a custom admin page created in Magento 2.') ?></p>

Step 6: Verify and Test

  1. Clear the cache and log in to the Magento admin panel.
  2. Navigate to Content > Custom Menu > Sub Menu.
  3. You should see the custom admin page with the content defined in index.phtml.

Conclusion: Creating custom admin routes and menus in Magento 2 allows you to extend the functionality of the admin panel, making it more tailored to your specific needs. By following this guide, you can add new features, improve usability, and ensure secure access with ACL configurations.

Updated: