Magento 2: Menu items with custom icon in admin panel
Magento 2: Menu items with custom icon in admin panel
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.
Adding menu items
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>
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:
- id = this is a unique identifier for your menu node
- title = this is the name of your menu item that appears in the menu
- module = this is our current module code
- sortOrder = this is used to sort the menu items when there are multiple
- resource = this is used for ACL (Access Control Lists). If the user does not have access to this resource, the menu item will not be displayed
- parent = this defined the parent menu of our current item. It is used only when you have a parent, otherwise it can be skipped
- action = this is used to define links to controllers, or if omitted, the menu item will go nowhere
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.
Adding custom icon to your menu item
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');
}
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>
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.