How To Add Menu in Magento 2?

Add Menu in Magento 2

Magento is one of the fastest-growing eCommerce platforms across the industry at this point. With the introduction of Magento 2 in the market, there is so much to look forward to for developers, especially in the Magento migration services area.

Along with ease of use, additional features and functions, and a wide array of extensions and development opportunities, Magento is the trusted powerhouse of the majority of the online stores and is known to provide cloud solutions that are innovative, flexible, and are rapidly growing, which is great for the dynamically changing eCommerce environment of today.

How to Add Custom Admin Menu in Magento 2:

Magento 2 offers multiple options for customizations according to the needs of the business owner, including the Magento 2 Custom Admin Menu, which is one of the main Magento B2B Features that Magento 2 has to offer. This is good news for developers of Magento because they can now provide Magento B2B Development Services in a more customized way to businesses, and the market for developers is now on the rise.

This article will further discuss the Magento 2 Custom Admin Menu and how to add this into the admin panel. In addition, the creation of custom modules, files, routes, and the utilization of different functionalities of the online store and its development will also be discussed in more detail.

How to create a Module on Magento 2:

For the purpose of creating a module on Magento 2, the Namespace for the module will be Folio3, and the admin menu on Magento will be given the name of the module itself.

• Create the File: registration.php

There is a very simple step to create the file – registration.php

First of all, the developer, or whoever is working on the Magento platform, needs to navigate to where the file is, and this can be done by finding: MagentoRoot/app/code/Folio3/Adminmenu/

The next step is to add coding to the file, for which the following code will be used:

1. <?PHP
3. \Magento\Framework\Component\ComponentRegistrar::register(
5. \Magento\Framework\Component\ComponentRegistrar::MODULE,
7. ‘Folio3_Adminmenu’,
9. __DIR__
11. );

 

• How to Create File Module?

Using similar steps to the one followed above, a module file can also be created.

First step is to know that a module.xml file needs to be created.

Next, choose the file Folio3/Adminmenu/etc/ where the module will be created.

Finally, add the coding, using the following code:

1. <?xml version=”1.0″?>
2. <config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module/etc/module.xsd”> <module name=”Folio3_Adminmenu” setup_version=”1.0.0″></module>
3. </config>

 

Once the module.xml is created, the developer, or owner, or whoever is working on the platform can accept the fact that the first phase is clear, as the addition of the custom admin menu in Magento is now successfully complete.

• Create File Routes

Files can be created using multiple different routes; therefore, it is better if the developer or worker can declare the route beforehand.

The route that is chosen will actually define a name for the module that needs to be created next. The name will enable the user to find the URL for the next task, and they can also execute the controller action and control the whole operation that will now take place.

But for this whole process to take place, the developer needs to create a new file, and that file needs to be named: routes.xml.

The path for this file is also defined already, and should be: app\code\Folio3\Adminmenu\etc\routes.xml

The best place to add the file: routes.xml is in a pre-determined or already made folder called “adminhtml”, so that there is no confusion, and the developer knows that these files are specifically for applying to the admin and these codes are saved for that sole purpose only.

1. ?xml version=”1.0″?>
2. <config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Backend:app/etc/routes.xsd”>
3. <route id=”admin”>
4. <route id=”admin” frontName=”mainmenu”>
5. <module name=”Folio3_Adminmenu”/>
6. </router>
7. </router>
8. </config>

• Create a New Menu Item

The admin and admin menu within Magento is all handled by a file named: menu.xml.

This file is vast and contains all the configuration, menu, and additional elements of the development.

The actual menu itself may also contain multiple additional elements that are a part of it.

If the owner, or developer, wants to create any new files, or a new menu item, such as menu.xml, they can do it by following the given steps.

First, the path of the file needs to be chosen, and should preferably be: Folio3/Adminmenu/etc/adminhtml/

Next, the following code can be added for any content that the developer wants to add:

1. <?xml version=”1.0″?>
2. <config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”urn:magento:module:Magento_Backend:etc/menu.xsd>
4. <menu>
6. <add id=”Folio3_Adminmenu::first_level_demo”
8. title=”Folio3 Admin Menu”
9. module=”Folio3_Adminmenu”
10. sortOrder=”20″
11. resource=”Magento_Backend::content” />
13. <add id=”Folio3_Adminmenu::second_level_demo”
15. title=”Sub Menu”
16. module=”Folio3_Adminmenu”
17. sortOrder=”1″
18. action=”menuitem/index/index”
19. parent=”Folio3_Adminmenu::first_level_demo”
21. resource=”Magento_Backend::content” />
22. </menu>
23. </config>

 

This whole code of the menu.xml file actually has two elements of <add> that have been defined here, along with their attributes.

This is because; the first <add> element is for the usage of the first level of the menu.

Naturally, in the same way, the second <add> element is to be used for the next, or second, level menu.

The second menu, however, has additional actions that can be performed and even have parent attributes that we will now define.

• Attributes Explanation

Id: this is the unique identifier given to files, etc., for identification purposes.

Title: this is the title that is given to the menu to show up in the files for admin.

Module: this defines the module to use.

SortOrder: this sorts the placing of icons and files on the menu in a series of priority.

Resource: this is a rule used to find out which user has access to the admin and the admin menu.

Action: this is the link to access any specific controller or admin member.

Parent: this is the one that defines what level, especially the first level, a menu will look like or depend on.

• How to Clear Magento Cache

The user or developer, at this stage, is now fully prepared to create the Magento admin menu in the Admin Panel itself.

Although, in order to activate or enable any kind of custom module, a special Magento command needs to be administered, which is given below:

1. rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/*
3. php bin/magento cache:clean
5. php bin/magento cache:flush
7. php bin/magento setup:upgrade
9. php bin/magento setup:di:compile
11. php bin/magento indexer:reindex

Final Thoughts

The steps in each of the categories mentioned are very easy to follow, and if the developer follows the steps as given, the development phase will be over soon, and the online store owner can gain their customized stores easily and faster.

The use of menu.xml is an important step of the Magento 2 customization, and the concept behind it is only understandable to those who have carefully followed all the steps given in this article.

If you are one of those who have followed each step as per instructions given, you are surely now going to have a Magento 2 Custom Admin Menu that suits your business needs and wants, which is highly visible to all the customers visiting your online store now.