{"id":23338213,"url":"https://github.com/kosalexei/active-menu-link","last_synced_at":"2025-04-09T22:30:54.540Z","repository":{"id":34019227,"uuid":"164688724","full_name":"Kosalexei/active-menu-link","owner":"Kosalexei","description":"A pure JavaScript smooth scroll \u0026 scrollspy library which highlights the active menu item based on the scroll position.","archived":false,"fork":false,"pushed_at":"2023-01-07T04:41:58.000Z","size":489,"stargazers_count":19,"open_issues_count":15,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T00:24:22.226Z","etag":null,"topics":["highlight","highlighting","html","javascript","menu","navbar","navigation","scrolling","scrollspy-library","typescript","ui"],"latest_commit_sha":null,"homepage":"https://active-menu-link.netlify.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kosalexei.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-08T16:24:07.000Z","updated_at":"2024-09-22T21:07:20.000Z","dependencies_parsed_at":"2023-01-15T03:59:48.319Z","dependency_job_id":null,"html_url":"https://github.com/Kosalexei/active-menu-link","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kosalexei%2Factive-menu-link","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kosalexei%2Factive-menu-link/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kosalexei%2Factive-menu-link/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kosalexei%2Factive-menu-link/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kosalexei","download_url":"https://codeload.github.com/Kosalexei/active-menu-link/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248123293,"owners_count":21051437,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["highlight","highlighting","html","javascript","menu","navbar","navigation","scrolling","scrollspy-library","typescript","ui"],"created_at":"2024-12-21T03:12:47.288Z","updated_at":"2025-04-09T22:30:54.513Z","avatar_url":"https://github.com/Kosalexei.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# active-menu-link\n\n[![NPM version](https://img.shields.io/npm/v/active-menu-link.svg)](https://www.npmjs.com/package/active-menu-link)\n[![NPM downloads](https://img.shields.io/npm/dm/active-menu-link.svg)](https://www.npmjs.com/package/active-menu-link)\n\n## Highlight Active Menu Based On The Scroll Position\n\nA pure JavaScript smooth scroll \u0026 scrollspy library which highlights the active menu item based on the scroll position.\n\nA 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.\n\n## Example\n[Example](https://active-menu-link.netlify.com/)\n\n## Installation\n\n```shell\nyarn add active-menu-link\n# OR\nnpm install active-menu-link\n```\n\n## Usage\n\n### HTML\n\n```html\n\u003cnav class=\"navbar\"\u003e\n  \u003cul class=\"navbar-items\"\u003e\n    \u003cli\u003e\u003ca href=\"#first\"\u003eFirst\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#second\"\u003eSecond\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#third\"\u003eThird\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n\n\u003cdiv class=\"blocks\"\u003e\n  \u003cdiv class=\"block\" id=\"first\"\u003eFirst\u003c/div\u003e\n  \u003cdiv class=\"block\" id=\"second\"\u003eSecond\u003c/div\u003e\n  \u003cdiv class=\"block\" id=\"third\"\u003eThird\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### JavaScript\n\n```js\nimport ActiveMenuLink from \"active-menu-link\";\n\n// Not necessary.\nlet options = {\n  activeClass: \"active\"\n};\n\nnew ActiveMenuLink(\".navbar\", options);\n```\n\n## Options\n\n**Supported Options**\n\n| Name             |Type       | Default    | Description |\n| ---------------- |-----------| ---------- | ----------- |\n| itemTag          | `String`  | *li*       | Selector to which the active class will be applied |\n| activeClass      | `String`  | *active*   | Active class name |\n| scrollOffset     | `Number`  | *0*        | Scroll offset |\n| scrollDuration   | `Number`  | *500*      | Scroll duration in milliseconds |\n| ease             | `String`  | *out-circ* | Scroll animation (view [ease](https://github.com/component/ease) for more)   |\n| headerHeight     | `Number`  | *null*     | Navbar height. If *null*, height calculate automatic |\n| default          | `String`  | *null*     | If the scroll is not in one of the active sections, the default link will be active |\n| showHash         | `Boolean` | *true*     | Show hash in address bar |\n\n***Default* option example**\n\n### HTML\n\n```html\n\u003cnav class=\"navbar\"\u003e\n  \u003cul class=\"navbar-items\"\u003e\n    \u003cli\u003e\u003ca href=\"#default\"\u003eDefault\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#first\"\u003eFirst\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#second\"\u003eSecond\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#third\"\u003eThird\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n\n\u003cdiv class=\"blocks\"\u003e\n  \u003cdiv class=\"block\" id=\"first\"\u003eFirst\u003c/div\u003e\n  \u003cdiv class=\"block\" id=\"second\"\u003eSecond\u003c/div\u003e\n  \u003cdiv class=\"block\" id=\"third\"\u003eThird\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### JavaScript\n\n```js\nimport ActiveMenuLink from \"active-menu-link\";\n\nlet options = {\n  default: \"default\"\n};\n\nnew ActiveMenuLink(\".navbar\", options);\n```\n\n## Building\n\n```shell\ngit clone https://git@github.com/Kosalexei/active-menu-link.git\ncd active-menu-link\nnpm install\nnpm run build #Compiled .js file go to the dist folder.\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosalexei%2Factive-menu-link","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkosalexei%2Factive-menu-link","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkosalexei%2Factive-menu-link/lists"}