Active class jQuery functionality fails in HubSpot custom menu

[FlyingLeaf]

Issue with Dynamic Menu Highlighting in HubSpot

I’m building a custom navigation module in HubSpot and running into problems with the active state functionality. I need the clicked menu item to stay highlighted, but my jQuery script isn’t working properly.

The main problem is that when someone clicks a menu link, the page reloads and my active class gets reset. I’m working with HUBL templates mixed with regular HTML, so I’m not completely sure if my approach is correct.

Here’s my current implementation:

JavaScript:

$('.nav-menu a').on('click', function() {
    var selectedLink = $(this);
    selectedLink.parents('.nav-menu').find('li').removeClass('current'); 
    selectedLink.parentsUntil('.main-navigation', 'li').addClass('current'); 
})

CSS:

.nav-menu-item {
    width: fit-content;
    float: left;
    padding: 15px 20px;
}

a#nav-menu-links {
    text-decoration: none;
    color: #7a8a9a;
}

.current {
    background: #ffffff;
}

.main-navigation li {
    list-style: none;
    display: inline;
}

HTML:

<div class="main-navigation" id="navigation">
    <ul class="nav-menu" id="main-nav">
        <li class="nav-menu-item current">
            <a id="nav-menu-links" href="/articles/"> 
                <h5>Latest Posts</h5>
            </a>
        </li>
        <li class="nav-menu-item">
            <a id="nav-menu-links" href="/articles/category/news/"> 
                <h5>News</h5>
            </a>
        </li>
        <li class="nav-menu-item">
            <a id="nav-menu-links" href="/articles/category/reviews/"> 
                <h5>Reviews</h5>
            </a>
        </li>
        <li class="nav-menu-item">
            <a id="nav-menu-links" href="/articles/category/tutorials/">
                <h5>Tutorials</h5>
            </a>
        </li>
    </ul>
</div>

Any suggestions on how to make this work correctly in HubSpot?

[Isaac_Cosmos]

Had the exact same issue with HubSpot templates. The problem is you’re setting the active state with JavaScript, but navigation does a full page reload, so it gets wiped out. I fixed it by handling the active state server-side with HUBL variables. Use request.path to grab the current URL and compare it right in your template: {% if request.path == '/articles/category/news/' %}class="nav-menu-item current"{% else %}class="nav-menu-item"{% endif %} for each menu item. This way the right item gets highlighted as soon as the page loads - no waiting for JavaScript to kick in. Also, you’ve got duplicate IDs in your HTML which will break things. Change those to classes.

[Alex_Brave]

yup, the page reload is wiping out your JS changes. instead of using click events, just check the current URL on page load. try if(window.location.href.includes('/news/')) $('.nav-menu-item').eq(1).addClass('current') - works way better in hubspot.

[Noah_Fire]

The issue arises because your JavaScript executes after the page has loaded, yet navigation link clicks cause a full page refresh, which removes any dynamically added classes. Instead of relying on click events, you should determine the active menu item based on the current URL when the page loads. Use window.location.pathname to obtain the current path and match it with the href values of your menu links. By doing this check upon document load, you ensure that the relevant menu item remains highlighted regardless of how the user navigates to that page. Additionally, it’s important to note that using the same ID multiple times in your HTML violates HTML standards. Consider using classes for styling your navigation links instead.