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 <a> tag matches the current page URL?
Replies (8)
Hi,
You can use KTMenu.updateByLinkAttribute to activate a selected menu item, just set a correct href attribute for <a> tags in your menu.
When call updateByLinkAttribute on every page load, use current page route as a parameter for this function.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
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");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>
Thanks!
Wahooo! Brilliant that did it!
Thanks for you help
Glad to hear that. All the best with your project!
Your Support Matters!
React Dev Vacancy
