{"id":15814159,"url":"https://github.com/stevenvachon/scrolling-menu","last_synced_at":"2025-08-22T07:36:02.987Z","repository":{"id":54301161,"uuid":"183275482","full_name":"stevenvachon/scrolling-menu","owner":"stevenvachon","description":"A custom element for a menu that scrolls horizontally or vertically.","archived":false,"fork":false,"pushed_at":"2021-02-25T15:59:42.000Z","size":1925,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-17T00:37:29.435Z","etag":null,"topics":["custom-element","vanilla","virtualization","web-component","web-components","webcomponent"],"latest_commit_sha":null,"homepage":"https://stevenvachon.github.io/scrolling-menu","language":"JavaScript","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/stevenvachon.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-04-24T17:23:22.000Z","updated_at":"2024-03-27T14:26:43.000Z","dependencies_parsed_at":"2022-08-13T11:20:59.313Z","dependency_job_id":null,"html_url":"https://github.com/stevenvachon/scrolling-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stevenvachon/scrolling-menu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fscrolling-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fscrolling-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fscrolling-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fscrolling-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stevenvachon","download_url":"https://codeload.github.com/stevenvachon/scrolling-menu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stevenvachon%2Fscrolling-menu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271605724,"owners_count":24788968,"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","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["custom-element","vanilla","virtualization","web-component","web-components","webcomponent"],"created_at":"2024-10-05T04:23:09.218Z","updated_at":"2025-08-22T07:36:02.904Z","avatar_url":"https://github.com/stevenvachon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;scrolling-menu/\u0026gt; [![NPM Version][npm-image]][npm-url] [![Published on webcomponents.org][webcomponents-image]][webcomponents-url] ![File Size][filesize-image] [![Build Status][travis-image]][travis-url] [![Coverage Status][coveralls-image]][coveralls-url] [![Dependency Monitor][greenkeeper-image]][greenkeeper-url]\n\n\u003e A (native) web component for a menu that scrolls horizontally or vertically.\n\n* Based on [Shadow DOM v1](http://w3c.github.io/webcomponents/spec/shadow/) and [Custom Elements v1](https://html.spec.whatwg.org/multipage/scripting.html#custom-elements).\n* Menu items (`\u003coption\u003e`) are virtualized, meaning that only those within visible boundaries are added to the DOM tree, thereby supporting very long lists.\n* Mostly unstyled, making customization simpler.\n\n![Example](/example.gif?raw=true)\n\nCheck out the [feature demo](https://stevenvachon.github.io/scrolling-menu).\n\n\n## Installation\n\n[Node.js](http://nodejs.org) `\u003e= 10` is required. To install, type this at the command line:\n```shell\nnpm install scrolling-menu\n```\n\n\n## Usage\n\nImport as an ES Module:\n```js\nimport 'scrolling-menu';\n```\n\nImport as a CommonJS Module:\n```js\nrequire('scrolling-menu');\n```\n\nInstantiate via HTML:\n```html\n\u003cscrolling-menu\u003e\n  \u003coption value=\"1\"\u003eLabel 1\u003c/option\u003e\n  \u003coption value=\"2\" selected\u003eLabel 2\u003c/option\u003e\n  \u003coption value=\"3\" disabled\u003eLabel 3\u003c/option\u003e\n\u003c/scrolling-menu\u003e\n```\n\nInstantiate via JavaScript:\n```js\ndocument.createElement('scrolling-menu').append(document.createElement('option'));\n```\n\n\n## DOM Properties\n\n### `direction` property\nType: `String`  \nDefault value: `'vertical'`  \nThe axis with which menu options follow. Possible values: `'horizontal'`, `'vertical'`.\n\n### `disabled` property\nType: `Boolean`  \nDefault value: `false`  \nSets the state of user interactivity. Inspired by [`HTMLElement::disabled`](https://mdn.io/attribute/disabled).\n\n### `selectedIndex` property\nType: `Number`  \nThe index of the last selected option, where multiple selections are not possible. Inspired by [`HTMLSelectElement::selectedIndex`](https://mdn.io/HTMLSelectElement::selectedIndex).\n\n\n## Attributes\n\n### `direction` attribute\nSee [`direction` property](#direction-property).\n\n### `disabled` attribute\nSee [`disabled` property](#disabled-property).\n\n\n## Events\n\n### `change` event\nSee [`HTMLElement` `change` event](https://mdn.io/change_event).\n\n### `input` event\nSee [`HTMLElement` `input` event](https://mdn.io/input_event).\n\n\n## Slots\n\n### `decrement` slot\nCustom HTML content for the UI control that decrements the selected option.\n\n```html\n\u003cscrolling-menu\u003e\n  \u003cspan slot=\"decrement\"\u003e\n    \u003ci class=\"some-icon\"\u003e\u003c/i\u003e\n    Decrement\n  \u003c/span\u003e\n\u003c/scrolling-menu\u003e\n```\n\n### `increment` slot\nCustom HTML content for the UI control that increments the selected option.\n\n```html\n\u003cscrolling-menu\u003e\n  \u003cspan slot=\"increment\"\u003e\n    \u003ci class=\"some-icon\"\u003e\u003c/i\u003e\n    Increment\n  \u003c/span\u003e\n\u003c/scrolling-menu\u003e\n```\n\n### `option` slot\nCustom HTML content for each menu item. Instances of `{{label}}` and `{{value}}` will be interpolated.\n\n```html\n\u003cscrolling-menu\u003e\n  \u003ca href=\"path/{{value}}\" slot=\"option\"\u003e\n    \u003ci class=\"some-icon\"\u003e\u003c/i\u003e\n    {{label}}\n  \u003c/a\u003e\n\u003c/scrolling-menu\u003e\n```\n\n\n## CSS Parts\n\n### `disabled-option` part\nThe disabled-state [`option` part](#option-part).\n```css\nscrolling-menu::part(disabled-option) {\n  /* … */\n}\n```\n\n### `option` part\nThe element that contains the [`option` slot](#option-slot).\n```css\nscrolling-menu::part(option) {\n  /* … */\n}\n```\n\n### `options-container` part\nThe element that contains [elements that contain] [`option` parts](#option-part).\n```css\nscrolling-menu::part(options-container) {\n  /* … */\n}\n```\n\n### `selected-option` part\nThe selected-state [`option` part](#option-part).\n```css\nscrolling-menu::part(selected-option) {\n  /* … */\n}\n```\n\n\n## Compatibility\n\nDepending on your target browsers, you may need polyfills/shims for the following:\n\n* [`Array::find`](https://mdn.io/Array::find), [`Array.from`](https://mdn.io/Array.from), [`Array::includes`](https://mdn.io/Array::includes)\n* [`attachShadow`](https://mdn.io/attachShadow), [`customElements`](https://mdn.io/window.customElements)\n* [`classList`](https://mdn.io/classList), [`toggleAttribute`](https://mdn.io/toggleAttribute)\n* [`dispatchEvent`](https://mdn.io/dispatchEvent), [`new Event()`](https://mdn.io/Event/Event)\n* [`Math.trunc`](https://mdn.io/Math.trunc), [`Number.isNaN`](https://mdn.io/Number.isNaN)\n* [`MutationObserver`](https://mdn.io/MutationObserver), [`ResizeObserver`](https://mdn.io/ResizeObserver)\n* [`requestAnimationFrame`](https://mdn.io/requestAnimationFrame)\n* [`\u003ctemplate\u003e`](https://mdn.io/template)\n\n\n## FAQ\n1. **Why not add `options` and `selectedOptions` properties from `HTMLSelectElement`?**  \nUnfortunately, they're live `HTMLElement` collections that cannot be extended.\n\n\n[npm-image]: https://img.shields.io/npm/v/scrolling-menu.svg\n[npm-url]: https://npmjs.com/package/scrolling-menu\n[webcomponents-image]: https://img.shields.io/badge/webcomponents.org-unpublished-red.svg\n[webcomponents-url]: https://www.webcomponents.org/element/scroller-menu\n[filesize-image]: https://img.shields.io/badge/size-8.4kB%20gzipped-blue.svg\n[travis-image]: https://img.shields.io/travis/stevenvachon/scrolling-menu.svg\n[travis-url]: https://travis-ci.org/stevenvachon/scrolling-menu\n[coveralls-image]: https://img.shields.io/coveralls/stevenvachon/scrolling-menu.svg\n[coveralls-url]: https://coveralls.io/github/stevenvachon/scrolling-menu\n[greenkeeper-image]: https://badges.greenkeeper.io/stevenvachon/scrolling-menu.svg\n[greenkeeper-url]: https://greenkeeper.io/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevenvachon%2Fscrolling-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstevenvachon%2Fscrolling-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstevenvachon%2Fscrolling-menu/lists"}