Sidebar menu active state

Hi I'm using the Aspnetcore version of Metronic theme. I really like the componentised method of implementation, however I'm struggling to understand how to set the Active state on a Sidebar menu item. The example seems to set the MenuItem active state statically. If there a way to update the Menu item tag matches the current page URL?

Text formatting options
Submit

Replies (7)

Thank you for your reply Lauris however I'm having a problem with this.
I dont think that scripts.bundle.js is being loaded (in the aspnetcore demo)
I have just noticed that the menu dosnt work on the demo.

If I try to add

KTTheme.addJavascriptFile("/assets/js/scripts.bundle.js");
then I see an error relating to a searchObject
scripts.bundle.js:7483 Uncaught TypeError: searchObject.on is not a function
at Object.init (scripts.bundle.js:7483:26)

Can you confirm that the menu highlight should work on the demo? And any help with loading the scripts will be appreciated.
Thanks Nick

Hi,

scripts.bundle.js is a mandatory script and it shuld be included by default, we are connecting this script in file Starterkit/Views/Layout/Master.cshtml, we display all scripts defined in Starterkit/appsettings.json in propery Kt:Assets:Js.

"Js" : [
"plugins/global/plugins.bundle.js",
"js/scripts.bundle.js"
]

Thank you for your reply again. I managed to figure out why my script hadnt been included however I still cant get the menu to show the active menu option for the current page. The KTMenu.updateByLinkAttribute method is being called but no change occurs. (I got lost trying to debug the method when it is trying to get the menu item)

I have added a couple of temporary pages (e.g. Page1 & Page2)
I have included the following in Master.cshtml

<script>
KTMenu.updateByLinkAttribute(window.location.pathname);
</script>

and updated _Menu.cshtml
<!--begin:Menu item-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="/Page1">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Home</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-->
<!--begin:Menu item-->
<div class="menu-item">
<!--begin:Menu link-->
<a class="menu-link" href="/Page2">
<span class="menu-bullet">
<span class="bullet bullet-dot"></span>
</span>
<span class="menu-title">Home2</span>
</a>
<!--end:Menu link-->
</div>
<!--end:Menu item-->

Thanks

Hi,

You can try to wrap your code with onDOMContentLoaded function.

<script>
KTUtil.onDOMContentLoaded(function() {
KTMenu.updateByLinkAttribute(window.location.pathname);
});
</script>

Wahooo! Brilliant that did it!

Thanks for you help

Glad to hear that. All the best with your project!

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Text formatting options
Submit