How to Build Admin Menu in Magento 2

In this article, the following steps show you how to build Admin Menu in Magento 2 :

Step 1: Build menu.XML file

Step 2: include menu items

Step 3: Set menu is active by controller file

Magento 2 uses the left menu in the backend instead of the menu in Magento 1 above. Level 0 menu is displayed on the left side and there are sliders with lower level menus when we click status 0 menu (see the below example).

  1. Build menu.XML file

File directory: app/code/Webnexs/CustomMenu/etc/adminhtml/menu.xml

<?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>
  1. Include menu items

In this following example, we will build the main menu and 2 sub menus of CustomMenu module

<?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="Webnexs_CustomMenu::menu" title="Custom Menu" module="Webnexs_CustomMenu" sortOrder="10" resource="Webnexs_CustomMenu::create"/>

     <add id="Webnexs_CustomMenu::menu_item" title="Manage Items" module="Webnexs_CustomMenu" sortOrder="10" parent="Webnexs_CustomMenu::menu" action="custommenu/create/index" resource="Webnexs_CustomMenu::menu_item"/>

     <add id="Webnexs_CustomMenu::menu_configuration" title="Setting" module="Webnexs_CustomMenu" sortOrder="20" parent="Webnexs_CustomMenu::menu" action="adminhtml/system_config/edit/section/menu" resource="Webnexs_CustomMenu::menu_configuration"/>

    </menu>

</config>

Attributes:

Id: Identifier of this menu. This is a personal string and should follow this format: [Namespace_ModuleName] :: [menu_name].

Title: Text displayed in menu bar.

Module: block name, format: [namespace_ModuleName]

SortOrder: To define the status of the menu, the lower value will be displayed in the top of the menu.

Parent menu parent id

Action: redirect URL when clicked on menu: Format: [router_name] / [controller_name] / [action_name]

Resource uses to define ACL rule of the user role. Admin can use it to set permissions for any users.

Note: You can set a logo for status bar. Some icon is created by Magento. http://devdocs.magento.com/guides/v2.0/pattern-library/graphics/iconography/iconography.html

Result:

  1. Set menu is active by controller file
  • In the active menu the color of the menu and the background is different when clicked from the other menu.
  • We can configure it by controlling file (menu action):
  • File: app / code / Webnexs / customMenu / regulators / create / index.ph
namespace Webnexs\CustomMenu\Controller\Adminhtml\Create;

class Index extends \Magento\Backend\App\Action

{

 public function execute()

 {

 $resultPage = $this->_resultPageFactory->create();

 $resultPage->setActiveMenu('Webnexs_CustomMenu::menu);

 $resultPage->getConfig()->getTitle()->prepend(__(Custom Menu'));

 return $resultPage;

 }

}

Note: We comprise to refresh cache after creating menu

The above mentioned steps are the simplest process for you to Build Admin Menu in Magento 2. With this guide, you can handle the Admin Menu in Magento 2 easily. Each store has an Admin Menu in Magento 2 with various features.

Last Update: April 7, 2018  

March 9, 2018   530   Nandini Ramachandran    Operations    
Total 0 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Twitter
INSTAGRAM
LinkedIn