In many cases when creating extensions in Magento 2, it will be needed to add new menu items in the admin panel. This is quite easy, and I will show you how to do this and also add your custom icon to your main item, as you can also see in the hero image of this article.
The file that is responsible for creating menu items is menu.xml that has to be inside the folder: etc/adminhtml/
For all levels of menu items the content should be like this:
<?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="DEVLINE_Testimonial::DEVLINE"
title="DEVLINE"
module="DEVLINE_Testimonial"
sortOrder="10"
resource="DEVLINE_Testimonial::DEVLINE"/>
<add id="DEVLINE_Testimonial::testimonial"
title="Testimonials"
module="DEVLINE_Testimonial"
sortOrder="10"
parent="DEVLINE_Testimonial::DEVLINE"
resource="DEVLINE_Testimonial::testimonial"/>
<add id="DEVLINE_Testimonial::testimonial_index"
title="Manage Testimonials"
module="DEVLINE_Testimonial"
sortOrder="10"
parent="DEVLINE_Testimonial::testimonial"
resource="DEVLINE_Testimonial::testimonial_index"/>
</menu>
</config>
app/code/DEVLINE/Testimonial/etc/adminhtml/menu.xml
Above there are 3 types of menu items defined:
1. DEVLINE is the main menu that appears directly in the sidebar
2. Testimonials is a child of DEVLINE and it is a group in the opened menu, and that will hold the final menu items to pages
3. Manage Testimonials is a child of Testimonials and mostly this is the one that links to certain pages
For a better understanding of how to use them, the attributes are:
At this point, after a cache flush, you should be able to see the menu in your admin panel. However, I will proceed with adding a custom icon and clear the cache after that.
The easiest way to do this is to add a custom CSS file in the admin panel and add the icon by targeting your main menu item.
For this there are 3 simple steps to follow:
1. Create the CSS file first in view/adminhtml/web/css/ in your extension:
.admin__menu .level-0.item-devline > a:before {
content: url('../images/icon-devline.png');
}
app/code/DEVLINE/Testimonial/view/adminhtml/web/css/adminhtml.css
2. Upload your icon in view/adminhtml/web/images in your extension
3. Include your CSS file in the admin panel pages using a default.xml file in view/adminhtml/layout folder
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left"
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="DEVLINE_Testimonial::css/adminhtml.css"/>
</head>
</page>
app/code/DEVLINE/Testimonial/view/adminhtml/layout/default.xml
The last thing you need to do is to deploy the static content, but it is enough to do this in the admin area only, by running the following command:
php bin/magento setup:static-content:deploy --area adminhtml
Once you've done this, you should see a really cool admin menu with your custom icon:
nice
Thanks, Its works for me.