The menu on websites needs an active element to tell users on which page they are. With Highway and more globally AJAX navigation the header being outside of the data-router-wrapper as it should, it isn't updated on navigation and developers need to handle the active menu item programmatically with Highway events. The NAVIGATE_IN event fits perfectly for this kind of behavior.

// File: main.js
const H = new Highway.Core();

// Get all menu links
const links = document.querySelectorAll('nav a');

// Listen the `NAVIGATE_IN` event
// This event is sent everytime a `data-router-view` is added to the DOM Tree
H.on('NAVIGATE_IN', ({ to, location }) => {
  // Check Active Link
  for (let i = 0; i < links.length; i++) {
    const link = links[i];

    // Clean class
    link.classList.remove('is-active');

    // Active link
    if (link.href === location.href) {
      link.classList.add('is-active');
    }
  }
});

Tracking

Menu