How To Create Admin Menu In Magento 2

In this article, we will find how to add a link to Magento 2 Admin Menu, which shown on the left site of Admin Menu pages of Magento 2.

Firstly, we will find out the structure of the admin menu and how the action in each menu like. The structure of the menu is separated by level. You will see the level-0 on the left bar and the higher level is grouped and shown when you click on level-0 menu. For example, this image is a menu of Stores. You will see the Stores is a level-0 and show on the left bar. When you click on it, the sub-menu will show up like: Setting, Attributes, Taxes… and that sub-menu has some sub-sub-menu also (Setting has All Stores, Configuration, Terms and Conditions, Order Status).

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

So how the menu created? We will use the simple module Hello World which was created in previous topic to create a menu.

In Magento 2, we use the menu.xml to add this menu. Let create it:

To Create Admin Menu in Magento 2

• Step 1: Create menu.xml
• Step 2: Add Admin menu item
• Step 3: Flush Magento cache

Step 1: Create menu.xml

Create admin menu file called: menu.xml file

app/code/Mageplaza/HelloWorld/etc/adminhtml/menu.xml

with the following content:

<?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 2: 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="Mageplaza_HelloWorld::helloworld" title="Hello World" module="Mageplaza_HelloWorld" sortOrder="51" resource="Mageplaza_HelloWorld::helloworld"/>
        <add id="Mageplaza_HelloWorld::post" title="Manage Posts" module="Mageplaza_HelloWorld" sortOrder="10" action="mageplaza_helloworld/post" resource="Mageplaza_HelloWorld::post" parent="Mageplaza_HelloWorld::helloworld"/>
        <add id="Mageplaza_HelloWorld::hello_configuration" title="Configuration" module="Mageplaza_HelloWorld" sortOrder="99" parent="Mageplaza_HelloWorld::helloworld" action="adminhtml/system_config/edit/section/helloworld" resource="Mageplaza_HelloWorld::helloworld_configuration"/>
    </menu>
</config>

In this example, we will create a level-0 menu named “Hello World” and two sub-menus named “Manage Posts” and “Configuration”. The menu.xml file will define a collection of ‘add’ note which will add a menu item to Magento backend. We will see its structure:

<add id="Mageplaza_HelloWorld::post" title="Manage Posts" module="Mageplaza_HelloWorld" sortOrder="10" action="mageplaza_helloworld/post" resource="Mageplaza_HelloWorld::post" parent="Mageplaza_HelloWorld::helloworld"/>

Let’s explain some attributes:

• The id attribute is the identifier for this note. It’s a unique string and should follow the format: {Vendor_ModuleName}::{menu_description}.
• The title attribute is the text which will be shown on the menu bar.
• The module attribute is defined the module which this menu is belong to.
• The sortOrder attribute is defined the position of the menu. Lower value will display on top of menu.
• The parent attribute is an Id of other menu node. It will tell Magento that this menu is a child of another menu. In this example, we have parent=”Mageplaza_HelloWorld::helloworld”, so we - know this menu “Manage Posts” is a child of “Hello World” menu and it will show inside of Hello World menu.
• The action attribute will define the url of the page which this menu link to. As we talk above, the url will be followed this format {router_name}{controller_folder}{action_name}. - In this example, this menu will link to the module HelloWorld, controller Post and action Index
• The resource attribute is used to defined the ACL rule which the admin user must have in order to see and access this menu. We will find more detail about ACL in other topic.

You can also create more child menus and it will show like Store menu above.

I want to talk about the icon on the top menu level. You can see them above the level-0 menu title. This icon is generated by ‘Admin Icons’ font in Magento. You can see all of the icon and how to create an icon in this link

Step 3: Flush Magento cache

Make sure it admin menu items are displayed on Magento 2 admin, you should try to flush Magento 2 cache.

Run the following command line:

php bin/magento cache:clean

Now to go Magento 2 Admin and see result:

You may get 404 Not Found message, to trouble shoot it, follow this tutorial: 404 Not Found .

If you got this error message: Exception printing is disabled by default for security reasons, this topic may help.

Related Post

• How to Create Admin User via Command Line in Magento 2

• How to Create/Save Admin Grid in Magento 2

• Detail Guide to Create Magento 2 System.xml Configuration

• Magento 2 API Get Admin Token