Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Set Active Sidebar Menu when using MVC


When using MVC Route on Sidebarmenu, current page is not activated on the menu. Could you please help?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


Answered on previous post, this works for me :

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



Hi happy,

Glad to hear that happy If you need any further assistance please let us know.

Regards.


Your Support Matters!

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

Hi,

I have the same problem: I am applying Metronic theme 8.1.5 to existing MVC 5 application. After clicking on sidebar menu, current page is not activated on menu. I checked ASP.NET Core sample Starterkit and there is the same problem.
How do I use code from the previous post?

Thanks for your answer,
Regards, Valentin



when using with htmx, I am getting "menu-item menu-accordion showing" even when i click on a menu outside the tree ( happens when I click on a nested item, and then click on an outside item ). tried both of these

KTUtil.onDOMContentLoaded(function() {
console.log("active link: " + window.location.pathname);
KTMenu.updateByLinkAttribute(window.location.pathname, "hx-get");
});

document.addEventListener("htmx:afterSwap", function(event) {
console.log("active link: " + window.location.pathname);
KTMenu.updateByLinkAttribute(window.location.pathname, "hx-get");
});


for menu links like this
<a
class="menu-link"
hx-get="/admin"
hx-target="#kt_app_content"
hx-swap="outerHTML"
hx-push-url="true">



when using with htmx, I am getting "menu-item menu-accordion showing" even when i click on a menu outside the tree ( happens when I click on a nested item, and then click on an outside item ). tried both of these

KTUtil.onDOMContentLoaded(function() {
console.log("active link: " + window.location.pathname);
KTMenu.updateByLinkAttribute(window.location.pathname, "hx-get");
});

document.addEventListener("htmx:afterSwap", function(event) {
console.log("active link: " + window.location.pathname);
KTMenu.updateByLinkAttribute(window.location.pathname, "hx-get");
});


for menu links like this
<a
class="menu-link"
hx-get="/admin"
hx-target="#kt_app_content"
hx-swap="outerHTML"
hx-push-url="true">


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(