Discussion on Metronic - Responsive Admin Dashboard Template


keenthemes supports this item


This author's response time can be up to 1 business day.

213 comments found.


In metronic 5.0.4 when I set the active class to a menu item in the sidebar, this a few seconds later reload and clear my active class.

How can I set the active class to an item in this version of Metronic?

Hi :),

Setting the active state for menu items should be done in your sever side code. When you click and menu link and load a page the menu link’s code should be set active using specific class in the HTML code. This should be done in your server side code. Please check the HTML code and find out what classes should be added in your to set a menu link actve. Metronic itself is not an complete application since its just an HTML theme that requires further integration with your server side.


Hey, first of all thank you very much for this awesome design! I love it! Currently im working on it and trying to remove the “protlets” on the dashboards. But if i remove them some functions are not working like the dropdown in the sidebar. For example i removed the first “prolet” (Site Visits) from to the end of this div. Now there is the other from the second “prolet” (Avtivities). The activities, server load and regional stats arent loading anymore too. Why it isnt working? What am I doing wrong? For sure it is only a little error. Thanks for your help!

Hi crs0r :),

Thanks for your feedback.

Please note, if you remove any of Site Visits, Activities, Server Load, you should disable it’s javascript code in assets/js/app.js accordingly. Please refer handleDashboardCharts() function to do so. If you notice, in handleDashboardCharts() function, there are some js code that initialize the charts. If you want to remove all 3 charts from the dashboard, you can disable entire handleDashboardCharts() function in App.init() function body. Otherwise you should disable a particular chart’s js code in handleDashboardCharts() function.

Also please make sure that there is no js error on your page. You can debug your page for js errors on firefox using firebug extension getfirebug.com

Please let me know if you need further help.


Hello there Is it an active part of ckeditor image upload ? Can you be active not active ?


How do I add automatic active class to li when I selected the sidebar menu? Your template using active class manually.

Please help.

Thank you.

Hi :),

Do you want to load the content via ajax ? If yes you can check http://keenthemes.com/preview/metronic_admin/layout_ajax.html.

If you are not loading the content via ajax then may i know your purpose activating the sidebar menu links automatically ? By right when you click any link in the sidebar menu you will be redirected to the clicked link’s URL and the menu should be generated by your server side script according(by setting active class in the html code) to your current page.


I wish open was applied to arrow via javascript on load for the active menu instead of hard coded into the html. I’m trying to figure it out myself, but not having much luck.

Hi floppydrivez :),

Thanks for your feedback.

By default the sidebar menu classes(active, selected, open) is meant to be handled by server side script while generation a page.

Could you please explain your requirement ? Then i will try to point you out how you can modify it.


Sorry to the above questions I meant Portlets… not modals.

I want the entire header of a Portlet to be active to expand or collapse the porlet.


rajacv Purchased


We would like to extract row values into json format when selecting a row inside Datatable. Can you please help us with this.

We have tried couple of API options - datatable.row(selector) datatable.getValue()

But nothings working as per our requirement.


rajacv Purchased

sample code which we are trying - $(’#m_datatable_get’).on(‘click’, function( ){ datatable.rows(’.m-datatable__row—active’); var rowData = datatable.nodes(); console.log(rowData); });

We would to extract entire row values. Above code is not yielding results.



You could use this way to get the data object of the row. Get checked record and get value by column name:

$('#m_datatable_get').on('click', function() {
   // select active rows
   datatable.nodes().each(function(i, row) {
      var data = $(row).data('obj');


hi, i have a question. how can i activate each link on sidebar with jquery ? Any help would be appreciated


Hi :),

Could you please give us more details and what did you mean by activate ?

There is a ajax sidebar menu layout – http://keenthemes.com/preview/metronic_admin/layout_ajax.html. Isn’t what you were looking for ?


you now the class theat activate with red the the left sidebar? i use codeigniter and im not so god with jquery, i want in some way to add theat class on click.ex :i click on ui so ui have class active and is red. sorry about my english :(

Hi :),

The active links in the menu should be handled in the server side when you generate your pages. You will need to split the header, sidebar, content and footer parts. The header, sidebar menu and footer will be repeated for each page. So in the header script you can set the active menu using ”active” class based on which menu link is clicked(for each page’s url you need to put page id so you can set the active link). Basically in your case you should not use jquery to set the active link. Please check out the template pages and find out how the active menu set for each page so will be able to include that rule in your sidebar script.

Please let me know if you need any further clarifications.


Hi, Thank you for this FANTASTIC template !!!

I’d like to highlight the sidebar selection when I click on the menu button. Now I can load the right page but the button background does not change. the first menu item always remain with red backgroung …

Can you help me, please :-)

Thank you, Stefano

Hi folco75 :),

Many thanks for the comments.

Please note, when you change the active menu link, you should remove ”active” class from it parent LI element. Instead add the active class to the new active menu link. I would suggest you to check the sidebar menu HTML code on every sample page and you can learn how to work with sidebar menu.

Please let me know if you need further assistance.


Hello, Is there an completely entire video tutorial? Please reply me? Thanks!!

Hi :),

The video tutorial are in progress. We will publish theme soon. If you have a valid purchase code and active support subscription you can contact our support for any questions that are not covered in the documentation.


Please tell me you use Django as server-side language and you have a nice function to generate sidebar menu and handle active states?:)

Hi, can you try please to fix the monster lag on http://www.keenthemes.com/preview/metronic_admin/form_component.html on Multiple Select >> Searchable ? In default and group is almost ok but in searchable the computer process go to the max :/

Another question: is possible add a feature to add a css for activated menu? ex: if I use a menu with 3 levels if I click in a link on the third level the page load but the menu stay opened and the item that I access (menu) change the background color (activated)?

Hi :),

Thanks for highlighting this issue. We will definitely check it further and fix it by the next update.

Please note, the menu active states are set in the html code using ”active” class. If you use multilevel menu on the sidebar you should handle the active states in your server side script(when you generate your page) by adding ”active” class in the html code for each menu level.

Please let me know if you need any further assistance.


Hi, How can i activate a page by url of Content Loading via Ajax layout? Suppose i want to activate ajax link sample3 page under ajax submenu 2 by url. How can i do that?


Hi there,

As i understood, by default you want to active a different ajax link. To do so, first you will need to assign ID into the link you want to active and use below javascript code to activate the ajax content on page load:

HTML code of the sidebar menu’s link:
<a class="ajaxify" href="layout_ajax_content_3.html" id="my_ajax_content">
    Ajax Link Sample 2                    
JS code to active the link by ID:
jQuery(document).ready(function() {    
     $('#my_ajax_link').click(); // load the content for the dashboard page.



In the AngularJS template, is there a way to hide the sidebar highlight for items that are not listed there? When im on a page that is not listed on the sidebar, the highlight goes back to the first list item (dashboard in the example).

Thanks, João


You can modify the sidebar menu highlight condition right in the HTML code as shown below:

<ul class="nav"> <li ng-class="{active: $state.includes('profile.dashboard')}"> <a ui-sref="profile.dashboard"> <i class="icon-home" /> Overview </a> </li> <li ng-class="{active: $state.includes('profile.account')}"> <a ui-sref="profile.account"> <i class="icon-settings" /> Account Settings </a> </li> <li> <a href="#/todo"> <i class="icon-check" /> Tasks </a> </li> <li ng-class="{active: $state.includes('profile.help')}"> <a ui-sref="profile.help"> <i class="icon-info" /> Help </a> </li> </ul>

According to your requirement you can modify the above code to set the menu active state as you need.


I realized that when using Material Design, all button’s active class css attributes are overriden by one big css definition in the components-md.css file. Will you be fixing that in the next minor release?

When I am using portfolio template, with md buttons, I cannot see which filter is active without the active class’ visual difference. They all look the same. When I switch to regular bootstrap all works fine (meaning I see the active button).


We like the theme very much. Got a question though.

We’d like to link to a specific tab in the Extra Profile Page. E.g. like http://www.keenthemes.com/preview/metronic/extra_profile.html#tab_1_3 Now the page should activate the third tab on load (which it currently doesn’t). What’s the best way to achieve that behaviour?

Our current solution (triggering the click() event on the tab href) is not perfect because the page jumps to the anchor which essentially hides the top of the page. So, we’re looking for a solution that activates a given tab (tab hash as GET param) but does not scroll the page to the anchor.

Feedback is very welcome. :)

Keep up the good work! Thanks

Hi Neoos :),

Thanks for the comment.

Can you avoid using the #tab_1_3 ? if so, you can pass the parameter via _GET(e.g: extra_profile?section=account) and you can handle activating the tab in server side script. Or even you can read the _GET parameter in javascript by using the helper as App.getURLParameter(‘section’) then you can activate the needed tab.

Please let me know if you need more details on the above 2 methods.


Hi, i am Using metronic v5.5.5 demo12 theme, I made masterpage (layout) and want to make dynamic menu with jquery,

i write this script;

var url = window.location.pathname;
             $('#m_aside_left  a').each(function (index, element) {
                 linkx = $(this).attr("href");
                 if (linkx == url) {
$('.m-aside-menu').addclass('m-menu__item  m-menu__item--active');
        $('li .m-menu__item').parent("li").addclass('m-menu__item m-menu__item-submenu m-menu__item-active m-menu__item--open');

it’s not work correctly, how can solve it? thanks.

Hi :),

We would suggest you to handle the menu link states in your backend code(this is very common way of doing it). If you need to implement this frontend JS code you can use the mMenu class API method “setActiveItem” as shown below:

var menu = new mMenu('m_ver_menu'); // HTML ID:  m_ver_menu
var menuItem = mUtil.get('my_menu_item_id');
menu.setActiveItem(menuItem); // set active menu
//menu.resetActiveItem(menuItem); // reset active menu

“my_menu_item_id” is the HTML ID of the menu node’s(LI element).

Also our support is provided for verified buyers so if you have any further support enquiries please contact our support at support@keenthemes.com and provide with your purchase key.



For this page, http://www.keenthemes.com/preview/metronic_frontend/page_faq.html

The tab content keeps switching. Initially when the page loads, it shows first panel on right side in red color (tab3 content).

And when i click on another tab, and then click back on first tab (General Questions tab), then the first panel is in grey color (tab 1 content).

Wanted to check if there was any change required in any of the scripts, to consistently show tab1 content for the first tab on left when page loads and also when clicked on another tab, and then click back on tab1 a(for e.g General Questions tab here).


Hi :),

Please note that by default tab3 is active. But the “General Questions” is linkted to tab1. So you just need to make tab1 active by default by adding ”active” class as shown below:

<div id="tab_1" class="tab-pane active">

And remove ”active” class from tab3.

Please let me know if you need any further assistance.



Is it possible to save menu open/close state when user navigates to another page?

Do you guys planning to implement this?

Hi :),

That should be handled in the sever side based on current active page. Basically based on current active page ID or URL you sever side script should generate the sidebar menu and set the active menu link by adding ”active” and “open” css classes to particular menu nodes. You can browser inner page templates and learn the sidebar menu structure and apply the rule to set active menu links.

If you need any further clarifications please let us know.


Hi i am using m_wizard, how can i put a jquery/javascript code with the following:

if step2 == active { do some actions };

i tried everything to let javascript/jquery understand which step is active (1,2 or 3 etc). but nothng helpt me. So do you know how to code this.

Thnx in advance