MenuSpy – Highlight Nav Item Based on Current View

MenuSpy is a JavaScript library which offers three different solutions for highlighting menu item corresponding to the current section view.

The JS library is lightweight and fast and has no dependencies. Moreover, implementing different navigation solutions is very easy.

The different menu solutions include:


Here is how to use it:

Step 1 – Include MenuSpy.js

<script src="menuspy.js"></script>

MenuSpy will be available in the global scope.

Or install with NPM and require as a module

npm install menuspy
var MenuSpy = require('menuspy');

Step 2 – HTML Markup

<header id="main-header">
<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#usage">Usage</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#examples">Examples</a></li>
</ul>
</nav>
</header>

Step 3 – Initiate MenuSpy

var elm = document.querySelector('#main-header');
var ms = new MenuSpy(elm);

The MenuSpy() constructor accepts two arguments: the container element and an options object.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

For details on options, check MenuSpy GitHub page.

View MenuSpy Examples Download MenuSpy


You may also like...

2 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *