How to highlight visited menu links with CSS and JavaScript

In this article we see how to highlight a visited navigation link.

Updated: 31-Jan-2022 | Tags: HTML, CSS and Javascript | Views: 2053

Tutorial Categories

+ Javascript Lang Reference

Introduction

Most of the websites that we are going to design and create, will have a navigation menu. It is a common practice that we highlight the link that indicates the page we are on. I don't know why but i see many new programmers to do complicated thinks to achieve this task.
In this article article we will see an easy way to do this.

Live Demo

Take first a look at the live demo by clicking the button bellow.

The html code

This is the index.html file. Let's see what we have here.

<body id="index">
<nav>
	<div class="links">
		<a data-active="index" href="index.html">Home</a>
		<a data-active="products" href="products.html">Products</a>
		<a data-active="authors" href="authors.html">Authors</a>
		<a data-active="about" href="about.html">About us</a>
		<a data-active="contact" href="contact.html">Contact us</a>
	</div>
</nav>
  • First of all We have 5 links, that means that we have 5 pages.
  • Every a link has a data-active attribute, which holds as a value, the name of the file that the link points to. But this is not a rule, we can give to the data-active attribute any value we like.
    The important thing is that the body id matches the data-active value of the visited page.
    let me explain:
    In the index.html file we gave the body element an id="index". And we set the same value to the Home link data-attribute.
    In the products.html file we will set the body id="products", so it matches the products link data-attribute. And so on.
  • We are doing this because we need in every page we visit a reference point, so we can highlight the correct link. You will see that in the javascript code.

The javascript code

Now let's see what we have here.

let links = document.querySelectorAll(".links a");
let bodyId = document.querySelector("body").id;

for(let link of links){
    if(link.dataset.active == bodyId){
        link.classList.add("active");
    }
}
  • In line 1 we grab all the links and we store them in a variable named links. The Variable links is now an array holding the links.
  • In line 2 we are targeting the body id.
  • In line 4 we loop trough the links.
  • In line 5 we check which link's data-active attribute is equal to the body id.
  • When we find a match, we add to that link the ".active" css class, which we have in the css file.
    This class is adding the highlight to the visited link.
    nav a.active{
    	background: #245990;
    	color: #fff;
    	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    }
    		
  • This is all the code we need. I hope you find the article helpful.
  • Thanks for reading.

Summary

We saw how to highlight the visited menu links using JavaScript and CSS.

Download source code

You can download the source code and use it as a template to build your website.

Times downloaded: 342

View on Youtube

Buy me a coffee

If you like to say thanks, you can buy me a coffee.

Buy me a coffee with paypal

Comment section

You can leave a comment, it will help me a lot.

Or you can just say hi. 😉