active-menu-link v1.1.8

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

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://git@github.com/Kosalexei/active-menu-link.git
cd active-menu-link
npm install
npm run build #Compiled .js file go to the dist folder.