# active-menu-link

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

Latest version **1.1.8** (published 2020-05-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install active-menu-link
pnpm add active-menu-link
yarn add active-menu-link
bun add active-menu-link
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.8 |
| Published | 2020-05-24 |
| First published | 2019-01-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Alexei Kostyuchenko |
| Maintainers | kosalexei |
| Keywords | active, menu, link, navigation |

## Links

- npm: https://www.npmjs.com/package/active-menu-link
- Repository: https://git@github.com/Kosalexei/active-menu-link
- Homepage: https://github.com/Kosalexei/active-menu-link#readme
- Issues: https://github.com/Kosalexei/active-menu-link/issues
- npm.io page: https://npm.io/package/active-menu-link

## Dependencies (1)

- [scroll-to](https://npm.io/package/scroll-to.md) 0.0.2

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.1.8 (latest) — 2020-05-24
- 1.1.7 — 2019-10-03
- 1.1.6 — 2019-05-27
- 1.1.5 — 2019-05-15
- 1.1.4 — 2019-04-25
- 1.1.3 — 2019-04-16
- 1.1.2 — 2019-04-16
- 1.1.1 — 2019-04-15
- 1.1.0 — 2019-04-15
- 1.0.6 — 2019-04-15
- 1.0.5 — 2019-04-15
- 1.0.4 — 2019-04-15
- 1.0.3 — 2019-04-15
- 1.0.2 — 2019-04-15
- 1.0.1 — 2019-01-15
- … 1 more at https://npm.io/package/active-menu-link/versions

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

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

```js
import ActiveMenuLink from "active-menu-link";

let options = {
  default: "default"
};

new ActiveMenuLink(".navbar", options);
```

## Building

```shell
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.
```

---
_Source: https://npm.io/package/active-menu-link · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._