A way I find works for me is to just check the path current url of the page with location.pathname and compare it with whatever you want to name it, and then apply the appropriate class to it.

Here is some example code:

const pathMap = {
  '/': document.getElementById('home_nav'),
  '/about': document.getElementById('about_nav'),
  '/contact': document.getElementById('contact_nav'),
  '/projects': document.getElementById('projects_nav'),
};

const path = location.pathname;

if (pathMap[path]) {
  pathMap[path].classList.add('active');
}

You have to add this code to wherever your navbar is located. Keep in mind there might be better ways to do this, but if you only run this code where your navbar exists then there should be no problem. Another draw back is that this way does not support nested paths, so lets say you are at /projects/cat-hotel then it won't work properly, of course you can do some RegEx to solve this but I am just showing you an example.

I have used these two solutions and they worked just fine for me.

https://css-tricks.com/forums/topic/how-to-keep-the-page-highlighted-on-the-nav-bar/

https://css-tricks.com/forums/topic/highlight-nav-links-when-scrolling-the-page/