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).

magento 2 admin menu

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

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:

magento 2 admin menu

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

Image Description
Vinh Jacker
With over a decade of experience crafting innovative tech solutions for ecommerce businesses built on Magento, Jacker is the mastermind behind our secure and well-functioned extensions. With his expertise in building user-friendly interfaces and robust back-end systems, Mageplaza was able to deliver exceptional Magento solutions and services for over 122K+ customers around the world.
Previous Configuration - System.xml
Next Admin ACL
One Step Checkout for Magento 2 by Mageplaza

People also searched for

  • magento 2 admin menu
  • admin menu for magento 2
  • magento admin menu not working
  • magento admin menu not showing
  • magento create menu in admin
  • magento 2 create admin menu
  • magento 2 menu.xml
  • menu.xml in magento 2
  • magento 2 menu
  • create admin menu in magento 2
  • how to add menu in magento 2
  • add menu magento 2
  • create menu magento 2
  • magento 2 create menu
  • magento 2 admin module development
  • how to create menu in magento 2
  • magento 2 add menu item
  • magento 2 custom menu
  • add menu in magento 2
  • create menu in magento 2
  • magento 2 menu xml
  • custom menu magento 2
  • how to add submenu in magento 2 admin
  • magento 2 menu settings
  • magento 2 add menu item admin
  • how to add menu in magento 2 frontend
  • magento 2 add admin menu item
  • how to create top menu in magento 2
  • how to create menu in magento 2 admin panel
  • 2.3.x, 2.4.x
x