Magento2 – Admin Menu and Route

In this blog post we will see how to add a top menu element and admin route for your module

To add items to admin top menu, we need to create the file menu.xml at

Excellence/Hello/etc/adminhtml/menu.xml

The admin menu in magento2 has 3 parts
1. The main admin menu title which shows up in left sidebar
2. Submenu title
3. Actual menu

So in our menu.xml we need to make at-least 3 entries to make this work

<?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="Excellence_Hello::hello" title="Hello" module="Excellence_Hello" sortOrder="15" dependsOnModule="Excellence_Hello" resource="Excellence_Hello::hello"/>
        <add id="Excellence_Hello::hello_world" title="World" module="Excellence_Hello" sortOrder="10" parent="Excellence_Hello::hello" resource="Excellence_Hello::hello" />
        <add id="Excellence_Hello::hello_world_test1" title="Test1" module="Excellence_Hello" sortOrder="10" parent="Excellence_Hello::hello_world" action="hello/world" resource="Excellence_Hello::hello_world_test1"/>
    </menu>
</config>

Main points to note
1. id: should be unique
2. sortOrder: can be used to change ordering in left menu
3. resource: is used to defined acl which we will see next
4. parent: is used to set the parent item for menu. if not parent, its behaves as a top level menu

Next we need to add entry to our Excellence/Hello/etc/acl.xml file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Adminhtml::admin">
                <resource id="Excellence_Hello::hello" title="Hello" sortOrder="20">
                    <resource id="Excellence_Hello::hello_world" title="World" sortOrder="10">
                        <resource id="Excellence_Hello::hello_world_test1" title="Test1" sortOrder="10">
                        
                        </resource>
                    </resource>
                </resource>
                <!-- below part of our system configuration settings -->
                <resource id="Magento_Adminhtml::stores">
                    <resource id="Magento_Adminhtml::stores_settings">
                        <resource id="Magento_Adminhtml::config">
                            <resource id="Excellence_First::test_config" title="Hello World Section" />
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>

After doing these steps, if you open admin you should see your custom sidemenu and sub menu items.

Every menu item in sidebar has a custom icon. If you need a custom item for your menu add the class .admin__menu .item-hello > a:before in your css file and write your custom css.

Admin Routes

As we saw above, in our routes.xml we added the action ‘hello/world’ now we need to add route for it.

The routes for admin behave same as frontend, with small differences.

First we need to create a routes.xml file

Excellence/Hello/etc/adminhtml/routes.xml

<?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"> <!-- This part is different from frontend -->
        <route id="hello" frontName="hello">
            <module name="Excellence_Hello" />
        </route>
    </router>
</config>   

here we claimed the route ‘hello’ , next we need to create Controllers

Excellence/Hello/Controller/Adminhtml/World/Index.php

since our action was ‘hello/world’, so we added World controller and Index action.

code inside our controller file is

<?php

namespace Excellence\Hello\Controller\Adminhtml\World;

class Index extends \Magento\Backend\App\Action
{
   
    public function __construct(
        \Magento\Backend\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        parent::__construct($context);
        $this->resultPageFactory = $resultPageFactory;
    }
    public function execute()
    {
        echo __METHOD__;
        exit;
    }
}

If all steps are followed properly, when you click on the admin menu ‘Test1’ you should see a white page with this text “Excellence\Hello\Controller\Adminhtml\World\Index::execute”

If some mistakes were made, then you will redirect to dashboard automatically.

The post Magento2 – Admin Menu and Route appeared first on Excellence Technologies Magento Blog | Magento Tutorials | Magento Developer.