https://github.com/kosalexei/active-menu-link

A pure JavaScript smooth scroll & scrollspy library which highlights the active menu item based on the scroll position.
https://github.com/kosalexei/active-menu-link

highlight highlighting html javascript menu navbar navigation scrolling scrollspy-library typescript ui

Last synced: about 1 month ago
JSON representation

A pure JavaScript smooth scroll & scrollspy library which highlights the active menu item based on the scroll position.

• Host: GitHub
• URL: https://github.com/kosalexei/active-menu-link
• Owner: Kosalexei
• License: mit
• Created: 2019-01-08T16:24:07.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:41:58.000Z (about 2 years ago)
• Last Synced: 2024-12-03T02:11:53.918Z (about 2 months ago)
• Topics: highlight, highlighting, html, javascript, menu, navbar, navigation, scrolling, scrollspy-library, typescript, ui
• Language: HTML
• Homepage: https://active-menu-link.netlify.com/
• Size: 478 KB
• Stars: 19
• Watchers: 3
• Forks: 5
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# active-menu-link

[![NPM version](https://img.shields.io/npm/v/active-menu-link.svg)](https://www.npmjs.com/package/active-menu-link)

[![NPM downloads](https://img.shields.io/npm/dm/active-menu-link.svg)](https://www.npmjs.com/package/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](https://active-menu-link.netlify.com/)

## Installation

```shell

yarn add active-menu-link

# OR

npm install active-menu-link

```

## Usage

### HTML

```html

  


    
First

    
Second

    
Third

  




  
First

  
Second

  
Third



```


### JavaScript

```js

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](https://github.com/component/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

```html

  


    
Default

    
First

    
Second

    
Third

  




  
First

  
Second

  
Third



```


### JavaScript

```js

import ActiveMenuLink from "active-menu-link";

let options = {

  default: "default"

};

new ActiveMenuLink(".navbar", options);

```

## Building

```shell

git clone https://[email protected]/Kosalexei/active-menu-link.git

cd active-menu-link

npm install

npm run build #Compiled .js file go to the dist folder.

```