-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
-
Hi,
Currently, the active class in the navigation menu is added automatically when the URL in the web browser matches the href value in the tag.
For example, if the URL is http://localhost/users and the link is <a href="/users" class="nav-link">
, the active class is automatically applied, resulting in: <a href="/users" class="nav-link active">
.
However, now I have navigation items like these:
<a href="/users?status=available" class="nav-link">User Available</a>
<a href="/users?status=onleave" class="nav-link">User On Leave</a>
How can I change the behavior so that the active class is applied based on the full URL, including query parameters?
Thank you!
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 3 comments
-
I found the solution. Put below code before the </body>
tag:
<script>
document.addEventListener("DOMContentLoaded", function () {
setTimeout(function () {
const currentUrl = window.location.pathname + window.location.search;
const navLinks = document.querySelectorAll(".nav-link");
// Remove all existing active classes
navLinks.forEach(function (link) {
link.classList.remove("active");
});
// Add active only to exact URL match
navLinks.forEach(function (link) {
const href = link.getAttribute("href");
if (href === currentUrl) {
link.classList.add("active");
}
});
}, 160); // Delay in milliseconds, can increase to 200 if needed
});
</script>
Thanks.
Beta Was this translation helpful? Give feedback.
All reactions
-
You can add data-coreui-active-links-exact="false"
to .sidebar-nav
Beta Was this translation helpful? Give feedback.
All reactions
-
Thanks @mrholek , I already add like this: <ul class="sidebar-nav" data-coreui="navigation" data-simplebar="" data-coreui-active-links-exact="false">
but no luck.
Could you show me the documentation for that, because when I go to https://coreui.io/bootstrap/docs I could not find information about it?
Beta Was this translation helpful? Give feedback.