Highlight Active Menu Based On The Scroll Position – active-menu-link

active-menu-link is a pure JavaScript smooth scroll & scrollspy library which highlights the active menu item based on the scroll position.

A typical use of this library is to create a sticky header navigation for your single page app that allows the user to smoothly scroll through page sections while highlighting the active menu item.

How to use it:

Install & download.

# Yarn
$ yarn add active-menu-link
# NPM
$ npm install active-menu-link --save

Import the package as a module.

import ActiveMenuLink from "active-menu-link";

Or directly load the UMD version in the document.

<script src="active-menu-link.js"></script>

Create the navigation and page sections on the page.

<nav class="navbar">
  <ul class="navbar-items">
    <li><a href="#first">First</a></li>
    <li><a href="#second">Second</a></li>
    <li><a href="#third">Third</a></li>
    ...
  </ul>
</nav>
<div class="blocks">
  <div class="block" id="first">First Section</div>
  <div class="block" id="second">Second Section</div>
  <div class="block" id="third">Third Section</div>
  ...
</div>

Initialize the active-menu-link.

new ActiveMenuLink(".navbar");

Apply your own styles to the active menu item.

.active {
  /* styles here */
}

Available options.

new ActiveMenuLink(".navbar",{
    // selector of menu item
    itemTag: "li",
    // active class
    activeClass: "active",
    // in pixels
    scrollOffset: 0,
    // duration in ms
    scrollDuration: 500,
    // easing function
    ease: "out-circ",
    // specifies the header height
    headerHeight: null,
    // string
    default: null,
    // shows hash tag
    showHash: true
    
});

Changelog:

05/24/2020

• v1.1.8