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

Category: Javascript , Menu & Navigation | May 24, 2020
Views Total:9,859 views
Official Page:Go to website
Last Update:May 24, 2020


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 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>
<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>

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



  • v1.1.8

You Might Be Interested In:

2 thoughts on “Highlight Active Menu Based On The Scroll Position – active-menu-link

  1. Bryan

    My download at the github/netlify.app link worked. This one didn’t as of 04/7/21


Leave a Reply