Detect Current Page

This script lets you disable the current page within a navigation menu on the front-end so that user’s cannot interact with it — because they are already on that page.

First, create a nodeList of all the links within the navigation. Then gets the current window’s location href and splits it into a string that only contains the final level of the path — which should be the current page itself. The if statement then compares the currentPage value to the links nodeList. If there is a match then add a class of “current-page” (give it appropriate styling as needed) and then preventDefault so clicking the link has no action.

CodePen

JavaScript

// **************************************************
//  Navigation Menu Traditional
//  Detect Current Page
// **************************************************
const currentPage = () => {
    const availLinks = document.querySelectorAll('.nav-traditional .nav-item > a');

    const currentUrl = window.location.href; // get the current URL from address bar
    let currentPage = currentUrl.substring(currentUrl.lastIndexOf('/')); // get the page name
    const removeAnchor = currentPage.split(/\#.*$/g); // remove any anchor (#) after the page name
    currentPage = removeAnchor[0]; // the final string

    // find the nav link that matches currentPage string
    // then add a new class to it and prevent it from being clicked
    availLinks.forEach(function(element) {
        const linkHref = element.getAttribute('href');

        if (element.href.indexOf(currentPage) > -1 && currentPage !== '/' && linkHref !== '#') {
            element.classList.add('current-page');
            element.addEventListener('click', (event) => {
                event.preventDefault();
            });
        }
    });
}
document.addEventListener('DOMContentLoaded', () => {
    currentPage();
});

HTML

<header id="site-header">
    <div class="header-container">
        <nav class="nav-traditional" aria-label="Navigation Menu">
            <ul>
                <li class="nav-item"><a href="/" class="nav-link">Nav Item 1</a></li>
                <li class="nav-item">
                    <a href="/" class="nav-link">Nav Item 2</a>
                    <ul class="nav-sub">
                        <li><a class="nav-link" href="/">Sub Item 1</a></li>
                        <li><a class="nav-link" href="/">Sub Item 2</a></li>
                        <li><a class="nav-link" href="/">Sub Item 3</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a href="/" class="nav-link">Nav Item 3</a></li>
                <li class="nav-item"><a href="/" class="nav-link">Nav Item 4</a></li>
                <li class="nav-item"><a href="/" class="nav-link">Nav Item 5</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS

// **************************************************
//  Header
// **************************************************
header#site-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10000;
  background: #EDEAEA;
}

.header-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 1.1em 1em;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
}

// **************************************************
//  Navigation Menu Traditional
// **************************************************
.nav-traditional {
  margin: 0;
  padding: 0;
  opacity: 1;
  display: block;

  @media (max-width: 1360px) {
    display: none;
  }

  >ul {
    margin: 0;
    padding: 0;

    >li {
      display: inline-block;
      position: relative;
      line-height: 3rem;

      >a {
        margin: 0 0.8em 0 0;
        padding: 0.3em 0.6em;
        color: #000;
        transition: color 0.5s;
        font-size: 1rem;
        font-weight: 500;
        text-transform: uppercase;
        text-decoration: none;

        @media (max-width: 1640px) {
          padding: 0.3em;
          font-size: 1rem;
        }
        
        @media (max-width: 1460px) {
          padding: 0 0.3em 0 0;
        }
        
        &:hover,
        &:focus,
        &.current-page {
          color: #C3113B;
        }
      }

      >ul {
        background: #C3113B;
        box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
        display: none;
        position: absolute;
        top: auto;
        margin: 0;
        padding: 0;
        list-style: none;
        white-space: nowrap;

        >li {
          line-height: 3rem;

          >a {
            display: block;
            color: #fff;
            font-size: 1.1rem;
            font-weight: 500;
            text-transform: uppercase;
            text-decoration: none;
            padding: 0.3em 1em 0.3em 0.6em;
            transition: color 0.5s, background-color 0.5s;

            &:hover,
            &:focus {
              background-color: #fff;
              color: #C3113B;
            }
          }
        }
      }

      // display dropdown on hover/focus
      &:hover,
      &:focus {
        >ul {
          display: block;
        }
      }

      // display dropdown on keyboard toggle (requires js)
      >ul.is-focused {
        display: block;
      }
    }
  }
}