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:

• Fixed header (see demo)
• Sidebar menu (see demo)
• Lavalamp menu (see demo)

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.

For details on options, check MenuSpy GitHub page.

View MenuSpy Examples Download MenuSpy