How to add an active class to navigation button based off of URL

Question

I'm working with MadCap Flare, and our team currently has four websites that we are supporting. We want to be able to link these different websites together, so we've added a navigation bar that links to each separate website. The navigation bar works as intended, but we have to assign the Active tag to the correct website link in each project. We're trying to avoid these kinds solutions because manually configuring settings in each project is not our preferred way of working.

We're looking for a way to automatically detect the URL and assign an Active tag based on the URL. This doesn't seem too difficult, and I've found a lot of similar questions and solutions, but I can't seem to figure out how to do this with our current setup. Our team does not consist of coders/programmers, so we could just be missing a very easy solution.

One major challenge is the fact that the hard links, such as https://example.com/Site1/Default.htm, are default links that redirect to the site's homepage, such as https://example.com/Site1/Home.htm, so I can't even do a simple comparison between the current page and the link. Many of the solutions I've found so far seem to break down at this point.

Here's our relevant code:

HTML

<div class="my-header">
      <ul class="XLink">
        <li class="XLink"><a href="https://example.com/Site1/Default.htm">Site 1</a>
        </li>
        <li class="XLink"><a href="https://example.com/Site2/Default.htm">Site 2</a>
        </li>
        <li class="XLink"><a href="https://example.com/Site3/Default.htm">Site 3</a>
        </li>
        <li class="XLink"><a href="https://example.com/Site4/Default.htm">Site 4</a>
        </li>
      </ul>
    </div>

CSS

ul.XLink
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    width: 100%;
}

li.XLink
{
    float: left;
}

li.XLink a
{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li.active
{
    background-color: #1c5a97;
}

/* Change the link color to #111 (black) on hover */

li.XLink a:hover
{
    background-color: #111;
}

div.my-header
{
    background-color: #103d78;
    margin-bottom: 15px;
    width: 75%;

I've tried a handful of Javascript that I've found online, but nothing has achieved what I was attempting. I've tried adding IDs to the line items, but I'm just too unfamiliar with Javascript to even know what I'm doing. Does anyone have some advice?

Does this answer your question? [Change link color of the current page with CSS](https://stackoverflow.com/questions/2397370/change-link-color-of-the-current-page-with-css) — Christopher, Jul 19 '22 at 18:27
Do you want the link to be "active" when the associated website is visited directly? @Christopher, :active wouldn't work in that case if the link was never clicked..hmm — D.B.K, Jul 19 '22 at 18:32
@D.B.K If I'm understanding your question correctly, yes, we always want the current website to be highlighted in the navigation bar. — HMT, Jul 19 '22 at 18:39
@HMT, Can the "current website" be navigated to directly, without having to visit the homepage? If not, the link posted by Christopher solves your problem — D.B.K, Jul 19 '22 at 18:48
@D.B.K I don't think this would work because the nav bar appears on every page of the website, so as soon as a user enters a different topic, they'll lose the active tag. The posted link can get me close, but it's not quite exactly what I need. Is there a way to compare strings within links/URLs? If Javascript could look at the link, find a string of "asdf," and then compare the link to the current URL of the webpage, and if both contain a string of "asdf," the list item with the link gets the active class. I'm sorry, I'm terrible at explaining this. — HMT, Jul 19 '22 at 19:19

D.B.K · Answer 1 · 2022-07-21T12:08:38.943

You could start by establishing some conventions.

All your "links" to said websites have a classname called "XLink", which I see you're already doing.
Each of these "links" has id=uniqueID of the associated website.

<div class="my-header">
      <ul class="XLink">
        <li class="XLink" id="Site1"><a href="https://example.com/Site1/Default.htm">Site 1</a>
        </li>
        <li class="XLink" id="Site2"><a href="https://example.com/Site2/Default.htm">Site 2</a>
        </li>
        <li class="XLink" id="Site3"><a href="https://example.com/Site3/Default.htm">Site 3</a>
        </li>
        <li class="XLink" id="Site4"><a href="https://example.com/Site4/Default.htm">Site 4</a>
        </li>
      </ul>
    </div>

Next, you'd have to detect the address change via JS

function onHashChange(){
   links = document.getElementsByClassName("XLink")
             .forEach(link =>{
                  if(location.href.includes(link.id){
                       link.classList.add("active");
                       break;
                    }
             }
}
$(document).ready(onHashChange);
window.onhashchange = onHashChange;

PS: this is just a trivial solution, assuming your website's URL dont have edgecases like https://example.com/Site1/page/Site3/Something.htm. For which you need to do a more fine grained regex match.

Definitely not the cleanest of the solutions though.

This *seems* exactly what I'm asking for, and I assumed adding ID tags to the listed items would help, but this unfortunately doesn't change anything for my builds. I placed your supplied code in a .js file and called the script in my master pages, but the generated output does not have any active items. I also included IDs that are text segments from the links. Does your code require `$(document).ready(function(){` line as well? — HMT, Jul 19 '22 at 20:16
yes, you'd probably need to put that in `ready` , but I don't see why. This function should run everytime your address bar content changes, i.e when you navigate to your child website using the nav links. — D.B.K, Jul 21 '22 at 12:04

How to add an active class to navigation button based off of URL

1 Answers1