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

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.

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

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

For details on options, check MenuSpy GitHub page.

View MenuSpy Examples Download MenuSpy


You may also like...

Leave a Reply

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