Disabled WordPress Navigation Links

disable-wp-nav-link.js

// JavaScript Document
"use strict";

// ===============================================
// Stop links w/ class 'nolink' from firing;
// Modify link attributes for accessibility.
// ===============================================

function modifyAtts() {
  // Modify the attributes on the <a> inside the <li> with class "nolink".
  // noLinks returns a collection.
  const noLinks  = document.getElementsByClassName('nolink');
  // We need to access the array prototype so we can treat the collection as an
  // array. Alternate syntax is Array.prototype.forEach.call(). See
  // https://stackoverflow.com/questions/16053357/what-does-foreach-call-do-in-javascript.
  [].forEach.call(noLinks, function(noLink) {
    const matches = noLink.getElementsByTagName('a')[0];
    matches.setAttribute('role', 'link');
    matches.setAttribute('aria-disabled', 'true');
    // Note: removing the HREF attribute makes the link unnavigable for keyboard users.
    // Leave it commented if users should be able to navigate to these links.
    // matches.removeAttribute('href');
    matches.removeAttribute('rel');
  });
}

modifyAtts();

function preventClick() {
  document.body.addEventListener('click', function (event) {
    // filter out clicks on any other elements
    if (!((event.target.nodeName == 'A' && event.target.getAttribute('aria-disabled') == 'true') || (event.target.nodeName == 'SPAN' && event.target.parentNode.getAttribute('aria-disabled') == 'true' && event.target.parentNode.nodeName == 'A'))) {
      return;
    }
    event.preventDefault();
  });
}

preventClick();

Disable "placeholder" links in WordPress navigation, while keeping semantics and ensuring accessibility. See this essay for background on the accessibility issues.

See this Pen for a working demonstration (vanilla JavaScript and jQuery).

Add the class .nolink to "container" menu items in Appearance > Menus.

You'll also want to style the cursor like this:

li.nolink>a {
  cursor: default;
}

Refactored the code from jQuery to vanilla JS (ES6).

Wrap code in functions. Fix bug where links that weren't direct children were also prevented from their default behavior. Target both the link and the span inside of the link.

Commented out matches.removeAttribute('href'); for keyboard accessibility.