Custom menu 'active' class not updating in Hubspot with jQuery

Other Questions HubSpot
1

I’m having trouble with a custom menu module in Hubspot. I want to add an ‘active’ class to menu items, but it’s not working when I use URLs as href attributes. The page refreshes when I click a link, but the ‘active’ class doesn’t change. I’m using HUBL+HTML and jQuery, but I’m not sure if I’m doing it right.

Here’s my jQuery code:

$('.nav-list a').click(function() {
  var clickedItem = $(this);
  clickedItem.closest('.nav-list').find('li').removeClass('current');
  clickedItem.parents('li').addClass('current');
});

And here’s my HTML structure:

<nav class="main-nav">
  <ul class="nav-list">
    <li class="nav-item current"><a href="/home">Home</a></li>
    <li class="nav-item"><a href="/products">Products</a></li>
    <li class="nav-item"><a href="/services">Services</a></li>
    <li class="nav-item"><a href="/about">About</a></li>
    <li class="nav-item"><a href="/contact">Contact</a></li>
  </ul>
</nav>

Am I missing something? How can I make the ‘active’ class stick after page refresh?

2

I think I see the issue here. Your jQuery code is working fine for the initial click, but it’s not persisting after the page reload. This is because the JavaScript runs client-side, and once the page refreshes, that information is lost.

To solve this, you need to determine the active page server-side. In HubSpot, you can use the ‘request.path’ variable to check against your menu item URLs. Here’s a quick example of how you might modify your HTML:

<nav class='main-nav'>
  <ul class='nav-list'>
    {% set pages = ['home', 'products', 'services', 'about', 'contact'] %}
    {% for page in pages %}
      <li class='nav-item {% if request.path == '/' ~ page %}current{% endif %}'>
        <a href='/{{ page }}'>{{ page|capitalize }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>

This approach will ensure the correct ‘current’ class is applied on page load, solving your persistence issue. You can keep your jQuery for smooth transitions if desired.

3

hey there! i’ve run into this before. the issue is ur jquery only works on click, not after refresh. try using HubL to set the ‘current’ class server-side:

{% for item in menu.items %}

  • {{ item.label }}
    • {% endfor %}

    this way it’ll stick after reload. ur jquery can stay for smooth transitions. good luck!

    4

    I’ve encountered a similar issue before, and I think I know what’s going on. The problem is that your jQuery code only runs when the link is clicked, but it doesn’t persist after the page reloads. Here’s what worked for me:

    Instead of relying solely on jQuery, I used a combination of JavaScript and server-side logic. On the server side (using HubL in your case), you can compare the current page URL with each menu item’s href. Then, add the ‘current’ class to the matching item.

    Something like this in your HubL template:

    {% for item in menu.items %}

  • {{ item.label }}
    • {% endfor %}

    This way, the ‘current’ class is added when the page loads, reflecting the actual current page. You can keep your jQuery for smooth transitions between clicks, but the server-side logic ensures the correct state after page refresh.

    Hope this helps solve your issue!