active-menu-link

Highlight Active Menu Based On The Scroll Position

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.

Example

Example

Installation

yarn add active-menu-link
# OR 
npm install active-menu-link

Usage

HTML

<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</div>
  <div class="block" id="second">Second</div>
  <div class="block" id="third">Third</div>
</div>

JavaScript

import ActiveMenuLink from "active-menu-link";
 
// Not necessary.
let options = {
  activeClass: "active"
};
 
new ActiveMenuLink(".navbar", options);

Options

Supported Options

Name	Type	Default	Description
itemTag	String	li	Selector to which the active class will be applied
activeClass	String	active	Active class name
scrollOffset	Number	0	Scroll offset
scrollDuration	Number	500	Scroll duration in milliseconds
ease	String	out-circ	Scroll animation (view ease for more)
headerHeight	Number	null	Navbar height. If null, height calculate automatic
default	String	null	If the scroll is not in one of the active sections, the default link will be active
showHash	Boolean	true	Show hash in address bar

Default option example

HTML

<nav class="navbar">
  <ul class="navbar-items">
    <li><a href="#default">Default</a></li>
    <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</div>
  <div class="block" id="second">Second</div>
  <div class="block" id="third">Third</div>
</div>

JavaScript

import ActiveMenuLink from "active-menu-link";
 
let options = {
  default: "default"
};
 
new ActiveMenuLink(".navbar", options);

Building

git clone https://[e-mail]/Kosalexei/active-menu-link.git
cd active-menu-link
npm install
npm run build #Compiled .js file go to the dist folder.