In Magento 2 if you are developing multiple modules under the same Namespace then should create a menu for all modules. So you can place all your modules setting or any URL under a single menu which will be your Namespace.

In this post, We will see how to add a custom module menu to the admin panel, how to add custom CSS to the admin panel, how to add system configuration and how to add menu icon in Magento 2.

 Magento 2 menu

First Let’s create module’s main files.

Start Module main files

Create Vky/Core/registration.php

<?php
/**
 * @category   Vky
 * @package    Vky_Core
 * @author     Vicky <viky.031290@gmail.com>
 * @copyright  Copyright © VKY All right reserved
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vky_Core',
    __DIR__
);

Create Vky/Core/composer.json

{
    "name": "vky/core",
    "description": "Vky core module. It's purpose is to add menu and config placeholders",
    "keywords": [
        "core",
        "installer",
        "notifier",
        "vky services",
        "module manager",
    ],
    "type": "magento2-module",
    "version": "0.0.1",
    "license": "OSL-3.0",
    "autoload": {
        "files": [ "registration.php" ],
        "psr-4": {
            "Vky\\Core\\": ""
        }
    }
}

Create Vky/Core/etc/module.xml

<?xml version="1.0"?>
<!--
/**
 * @category   Vky
 * @package    Vky_Core
 * @author     Vicky <viky.031290@gmail.com>
 * @copyright  Copyright © VKY All right reserved
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vky_Core" setup_version="0.0.1"/>
</config>

Required files for a simple module is now created.

End Module main files

Now let’s add the menu.

Start For menu

Create Vky/Core/etc/adminhtml/menu.xml

<?xml version="1.0"?>
<!--
/**
 * @category   Vky
 * @package    Vky_Core
 * @author     Vicky <viky.031290@gmail.com>
 * @copyright  Copyright © VKY All right reserved
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Vky_Core::vky"
            title="Vky"
            module="Vky_Core"
            sortOrder="55"
            resource="Vky_Core::vky"
        />
        <add id="Vky_Core::general"
            title="General"
            module="Vky_Core"
            sortOrder="5"
            parent="Vky_Core::vky"
            resource="Vky_Core::general"
        />

        <add id="Vky_Core::extensions"
            title="Extensions"
            module="Vky_Core"
            sortOrder="5"
            parent="Vky_Core::vky"
            resource="Vky_Core::extensions"
        />

        <add id="Vky_Core::services"
            title="Services"
            module="Vky_Core"
            sortOrder="0"
            parent="Vky_Core::vky"
            resource="Vky_Core::services"
        />
    </menu>
</config>
End For menu

That was for the menu Now let add system configuration.

Start For Store->Configuration->Our Module

Create Vky/Core/etc/adminhtml/system.xml

<?xml version="1.0"?>
<!--
/**
 * @category   Vky
 * @package    Vky_Core
 * @author     Vicky <viky.031290@gmail.com>
 * @copyright  Copyright © VKY All right reserved
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="vky" sortOrder="297">
            <label>Vky</label>
        </tab>
        <section id="vky_core" type="text" sortOrder="100" showInDefault="1" showInWebsite="0" showInStore="0">
            <class>separator-top</class>
            <tab>vky</tab>
            <label>Core</label>
            <resource>Vky_Core::core_config</resource>
            <group id="general" translate="label" type="text" sortOrder="250" showInDefault="1">
                <label>General</label>
                <field id="enabled" translate="label" type="select" sortOrder="1" showInDefault="1">
                    <label>Enabled</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
            </group>
        </section>
    </system>
</config>
End For Store->Configuration->Our Module
Start For menu icon

Add an icon image file at Vky/Core/view/adminhtml/web/images/vky_logo.png

Now We will need CSS to add this image

Start to add CSS in the head admin panel

Create Vky/Core/view/adminhtml/web/css/vky.less

.admin__menu .item-vky > a:before {
    content: '' !important;
    background: url(../images/vky_logo.png) no-repeat 50% 50%;
    background-size: 35px auto;
    height:40px !important;
}

Create Vky/Core/view/adminhtml/layout/default.xml

<?xml version="1.0"?>
<!--
/**
 * @category   Vky
 * @package    Vky_Core
 * @author     Vicky <viky.031290@gmail.com>
 * @copyright  Copyright © VKY All right reserved
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vky_Core::css/vky.css"/>
    </head>
</page>
End to add CSS in the head admin panel
End For menu icon

Now at the beginning of the post, I said you can place all your modules setting or any URL under a single menu which will be your Namespace.

We have Vky_Core module. And added in menu.
This module’s menu contains other menus like
– Vky
– General
– Extensions
– Services

And you will not able to sell all this menu because they don’t have any sub-menu. So if we create any module now we will add a menu for that under “Extensions”.

For example, you have created a new module Vky_Test. So all you need to do is open the menu.xml file of the Vky_Testmodule we will need to put below code.

<?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="Vky_Test::test" title="Test" module="Vky_Test" sortOrder="0" parent="Vky_Core::extensions" action="test/index" resource="Vky_Test::test"/>
   </menu>
</config>

Here parent=”Vky_Core::extensions” is responsible to add our menu uder “Extensions”.

If you want to download full source code Click here to download Vky_Core Module

Be kind to one another. Take care!

No Comments

Post A Comment