{"id":16402186,"url":"https://github.com/dev-javascript/tabs-more-button","last_synced_at":"2026-02-27T22:33:29.322Z","repository":{"id":237233608,"uuid":"794089634","full_name":"dev-javascript/tabs-more-button","owner":"dev-javascript","description":"Responsive Tabs with more button","archived":false,"fork":false,"pushed_at":"2024-04-30T12:41:52.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-05-02T08:10:10.923Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-javascript.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-30T12:41:51.000Z","updated_at":"2024-04-30T12:41:55.000Z","dependencies_parsed_at":"2024-04-30T14:11:32.259Z","dependency_job_id":"f8cb60e3-4e99-46e7-a262-aa20a9c1c110","html_url":"https://github.com/dev-javascript/tabs-more-button","commit_stats":null,"previous_names":["dev-javascript/tabs-more-button"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Ftabs-more-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Ftabs-more-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Ftabs-more-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-javascript%2Ftabs-more-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-javascript","download_url":"https://codeload.github.com/dev-javascript/tabs-more-button/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240339546,"owners_count":19785956,"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":[],"created_at":"2024-10-11T05:45:24.447Z","updated_at":"2026-02-27T22:33:24.301Z","avatar_url":"https://github.com/dev-javascript.png","language":null,"readme":"# tabs-more-button\n\n[![Test coverage](https://codecov.io/gh/dev-javascript/tabs-more-button/graph/badge.svg?token=GT1LU074L2)](https://codecov.io/gh/dev-javascript/tabs-more-button) [![NPM version](http://img.shields.io/npm/v/tabs-more-button.svg?style=flat-square)](http://npmjs.org/package/tabs-more-button) [![License](http://img.shields.io/npm/l/tabs-more-button.svg?style=flat-square)](LICENSE) [![npm download](https://img.shields.io/npm/dm/tabs-more-button.svg?style=flat-square)](https://npmjs.org/package/tabs-more-button) [![Build Status](https://travis-ci.org/ly-components/tabs-more-button.png)](https://travis-ci.org/ly-components/tabs-more-button)\n\n`tabs-more-button` is a lightweight library designed to enhance your tabbed interfaces by making them responsive.​ This package does not create or manage tabs, but it intelligently hides overflow tabs while ensuring that the active tab remains visible. Ideal for scenarios where space is limited\n\n## Features\n\n- Responsive\n\n- `Vertical` support\n\n- `rtl` support\n\n- Flexible style\n\n- High performance\n\n## Installation\n\n\u003e $ npm install tabs-more-button --save\n\nor\n\n\u003e $ yarn add tabs-more-button\n\nIf you need to directly include script in your html, use the following links :\n\n```js\n\u003cscript src=\"https://unpkg.com/tabs-more-button@latest/dist/tabs-more-button.min.js\"\u003e\u003c/script\u003e\n```\n\n## Minimal Usage\n\nhtml :\n\n```html\n\u003cdiv id=\"container\"\u003e\n  \u003cul id=\"tablist\" style=\"display:inline-flex;\"\u003e\n    \u003cli\u003eTab 0\u003c/li\u003e\n    \u003cli\u003eTab 1\u003c/li\u003e\n    \u003cli\u003eTab 2\u003c/li\u003e\n    \u003cli\u003eTab 3\u003c/li\u003e\n    \u003cli style=\"color:red;\"\u003eActive Tab 4\u003c/li\u003e\n    \u003cli\u003eTab 5\u003c/li\u003e\n    \u003cli\u003eTab 6\u003c/li\u003e\n  \u003c/ul\u003e\n  \u003cbutton id=\"view-more-button\"\u003emore\u003c/button\u003e\n\u003c/div\u003e\n```\n\njs :\n\n```js\nimport tabsMoreButton from 'tabs-more-button';\n\nconst options = {\n  buttonElement: document.getElementById('view-more-button'),\n  containerElement: document.getElementById('container'),\n  tablistElement: document.getElementById('tablist'),\n};\nconst instance = new tabsMoreButton(options);\n\nlet hiddenTabs = instance.resize(4 /*selectedTabIndex*/);\naddEventListener('resize', () =\u003e {\n  hiddenTabs = instance.resize(4 /*selectedTabIndex*/);\n});\ndocument.getElementById('view-more-button').addEventListener('click', () =\u003e console.table(hiddenTabs));\n```\n\n## Rules\n\n- `view more` button is required to display the hidden tabs and should be next sibling element of `Tablist` element\n\n- `tabs` and `view more` button should be kept on same line\n\n- Should not be any gap between `view more` button and `Tablist`\n\n## options\n\n- buttonElement\n\n  - type : `HtmlELement`\n  - description : `view more` button\n\n- containerElement\n\n  - type : `HtmlELement`\n  - description : parent element of `view more` button and `Tablist` element\n\n- tablistElement\n\n  - type : `HtmlELement`\n  - description : the `Tablist` element\n\n- tabDisplay?\n\n  - type : `string`\n  - description : `display` value for each `tab` element\n  - default value : `inline-flex`\n\n- containerDisplay?\n\n  - type : `\"flex\"`|`\"block\"`\n  - description : `display` value for `containerElement`\n  - default value : `flex`\n\n## instance methods\n\n- resize\n\n  - type : `function`\n  - description : makes tabs responsive by hiding `overflow tabs` except `active tab`\n  - arguments :\n    - selectedTabIndex :\n      - type : `Number`\n      - description : index of active tab element in the tablist element\n    - direction? :\n      - type : `\"ltr\" | \"rtl\"`\n      - description : direction value of `tablist` element\n      - default value : `\"ltr\"`\n    - isVertical? :\n      - type : `Boolean`\n      - description : `true` means `tablist` element is vertical\n      - default value : `false`\n  - return :\n    - type : `Array\u003c{ el: HTMLElement, index: Number }\u003e`\n    - description : array of hidden tabs data\n\n## Test\n\n\u003e $ npm run test\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-javascript%2Ftabs-more-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-javascript%2Ftabs-more-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-javascript%2Ftabs-more-button/lists"}