Custom menu active state fails to update in HubSpot module

Other Questions HubSpot
1

Need help with navigation menu highlighting

I’m building a custom navigation component in HubSpot and running into issues with the active state management. The problem is that when users click on menu items, the page reloads and my JavaScript doesn’t maintain the selected state.

I’m working with HUBL templates and trying to figure out the best approach for this. The current setup uses jQuery to handle clicks, but since each menu item has a real URL, the page navigation interrupts the script execution.

Here’s what I have so far:

$(document).ready(function() {
  $('.nav-menu a').click(function() {
    var selectedItem = $(this);
    selectedItem.closest('.nav-menu').find('li').removeClass('current');
    selectedItem.closest('li').addClass('current');
  });
});

.nav-item {
  display: inline-block;
  margin: 0 15px;
  padding: 12px 18px;
}

.nav-link {
  text-decoration: none;
  color: #666;
}

.current {
  background-color: #f8f9fa;
  border-radius: 4px;
}

.navigation-wrapper ul { list-style: none; margin: 0; padding: 0; }

<div class="navigation-wrapper">
  <ul class="nav-menu">
    <li class="nav-item current"><a class="nav-link" href="/articles/">Latest Posts</a></li>
    <li class="nav-item"><a class="nav-link" href="/articles/category/tech/">Technology</a></li>
    <li class="nav-item"><a class="nav-link" href="/articles/category/business/">Business</a></li>
    <li class="nav-item"><a class="nav-link" href="/articles/category/design/">Design</a></li>
    <li class="nav-item"><a class="nav-link" href="/articles/category/marketing/">Marketing</a></li>
  </ul>
</div>

Any suggestions on how to make this work properly with HubSpot’s templating system?

2

Yeah, this is super common with server-side navigation. JavaScript state gets wiped on page reload, so you’ve got to handle the active state server-side with HUBL. I’ve hit this same issue on HubSpot projects. Best fix is using HUBL’s request object to compare your current URL against the menu items. Just modify your HTML template to check if the current page URL matches each menu item’s href. In your HUBL template, grab the current page URL with request.path or request.full_url, then conditionally add the ‘current’ class during rendering. When the page loads, the right menu item will already be active. Ditch the jQuery click handler completely - you don’t need it anymore. The active state gets determined server-side before the HTML hits the browser, which is way more reliable than trying to keep JavaScript state across page loads.

3

Had this exact headache on a client project last month. You’re trying to solve a server-side problem with client-side code - that’s the issue. I moved the logic into the HUBL template using conditional statements. Instead of hardcoding the ‘current’ class on the first menu item, apply it dynamically based on the current page context. Use content.absolute_url or request.path depending on your template type. Wrap each li element with something like {% set is_active = request.path starts_with '/articles/category/tech/' %} then add the class conditionally. The active state gets determined during page generation rather than after DOM load. Ditch the jQuery entirely - page navigation will always reset any JavaScript state anyway. Server-side approach is more reliable and works immediately without any flash of incorrect styling.

4

JavaScript won’t work here since the pages reload. Use HubL conditionals instead - check if request.path matches your menu URL and add the ‘current’ class right in the template. Try {% if request.path == '/articles/category/tech/' %}current{% endif %} in your li class. Much simpler than JavaScript.