{"id":41142623,"url":"https://github.com/jayfreestone/priority-plus","last_synced_at":"2026-01-22T18:51:43.572Z","repository":{"id":44091908,"uuid":"165395591","full_name":"jayfreestone/priority-plus","owner":"jayfreestone","description":"A modern implementation of the priority plus navigation pattern.","archived":false,"fork":false,"pushed_at":"2023-01-20T11:28:20.000Z","size":853,"stargazers_count":53,"open_issues_count":3,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-13T07:52:12.440Z","etag":null,"topics":["menu","navigation","priority","responsive","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://jayfreestone.github.io/priority-plus/","language":"TypeScript","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/jayfreestone.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}},"created_at":"2019-01-12T14:14:34.000Z","updated_at":"2025-06-28T08:27:36.000Z","dependencies_parsed_at":"2023-02-12T01:47:47.292Z","dependency_job_id":null,"html_url":"https://github.com/jayfreestone/priority-plus","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/jayfreestone/priority-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayfreestone%2Fpriority-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayfreestone%2Fpriority-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayfreestone%2Fpriority-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayfreestone%2Fpriority-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jayfreestone","download_url":"https://codeload.github.com/jayfreestone/priority-plus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jayfreestone%2Fpriority-plus/sbom","scorecard":{"id":508984,"data":{"date":"2025-08-11","repo":{"name":"github.com/jayfreestone/priority-plus","commit":"91a0909272f80236cdc74743c0c0ce3d6c52c633"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.4,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/23 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/jayfreestone/priority-plus/build.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/jayfreestone/priority-plus/build.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/jayfreestone/priority-plus/release.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/jayfreestone/priority-plus/release.yml/master?enable=pin","Info:   0 out of   4 GitHub-owned GitHubAction dependencies pinned","Info:   2 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/build.yml:1","Warn: no topLevel permission defined: .github/workflows/release.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Signed-Releases","score":0,"reason":"Project has not signed or included provenance with any releases.","details":["Warn: release artifact v1.5.0 not signed: https://api.github.com/repos/jayfreestone/priority-plus/releases/40802126","Warn: release artifact v1.3.1 not signed: https://api.github.com/repos/jayfreestone/priority-plus/releases/37876655","Warn: release artifact v1.3.0 not signed: https://api.github.com/repos/jayfreestone/priority-plus/releases/37871909","Warn: release artifact v1.2.0 not signed: https://api.github.com/repos/jayfreestone/priority-plus/releases/17974512","Warn: release artifact v1.5.0 does not have provenance: https://api.github.com/repos/jayfreestone/priority-plus/releases/40802126","Warn: release artifact v1.3.1 does not have provenance: https://api.github.com/repos/jayfreestone/priority-plus/releases/37876655","Warn: release artifact v1.3.0 does not have provenance: https://api.github.com/repos/jayfreestone/priority-plus/releases/37871909","Warn: release artifact v1.2.0 does not have provenance: https://api.github.com/repos/jayfreestone/priority-plus/releases/17974512"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 11 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"19 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T00:02:09.044Z","repository_id":44091908,"created_at":"2025-08-20T00:02:09.045Z","updated_at":"2025-08-20T00:02:09.045Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28668538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T17:07:18.858Z","status":"ssl_error","status_checked_at":"2026-01-22T17:05:02.040Z","response_time":144,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["menu","navigation","priority","responsive","vanilla-javascript"],"created_at":"2026-01-22T18:51:43.492Z","updated_at":"2026-01-22T18:51:43.551Z","avatar_url":"https://github.com/jayfreestone.png","language":"TypeScript","readme":"# priorityPlus\n\n![Github build status](https://github.com/jayfreestone/priority-plus/actions/workflows/release.yml/badge.svg)\n![npm](https://img.shields.io/npm/v/priority-plus.svg?color=%234263eb\u0026style=flat-square)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/priority-plus.svg?color=%234263eb\u0026style=flat-square)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=flat-square)](https://github.com/semantic-release/semantic-release)\n\nA modern implementation of the [priority plus](https://css-tricks.com/the-priority-navigation-pattern/) navigation pattern.\n\n![Animation showing nav items moving to and from the overflow nav.](docs/img/nav-demo.gif)\n\nYou can see a demo on the [landing page](https://jayfreestone.github.io/priority-plus/).\n\nThere's also a Glitch pen [available here](https://priority-plus-demo.glitch.me/#) with a different, alternatively styled example. Check out the [source](https://glitch.com/edit/#!/priority-plus-demo).\n\n**The short stuff**:\n\n- Vanilla JS, dependency free. Available as an ES6 module, or a drop-in IIFE assigned to the global `priorityPlus`.\n- Uses the [`IntersectionObserver` API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) instead of width-based calculations.\n- Toggles the appropriate [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) attributes to remain accessible.\n- Provides a class hook to style the menu differently when all items are in the overflow/hidden.\n- Provides a way to update the overflow toggle button with the hidden item count.\n\nComes in at under 2.5kb after `gzip`.\n\n## What is it\n\nAs [Brad](http://bradfrost.com/blog/post/complex-navigation-patterns-for-responsive-design/#priority-plus) explains:\n\n\u003e The Priority+ pattern...exposes what’s deemed to be the most important navigation elements and tucks away less important items behind a “more” link. The less important items are revealed when the user clicks the “more” link.\n\n![Diagram overview](docs/img/explanation.png)\n\nThis library implements the pattern by fitting as many navigation items as possible into the 'primary' navigation, and then automatically moving the rest into a dropdown. If more space becomes available, the links are gradually re-instated into the primary navigation.\n\nThere are already examples of libraries that follow this behaviour, such as [PriorityNav.js](http://gijsroge.github.io/priority-nav.js/). However most of these were written before the advent of modern browser APIs such as the [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), operating by measuring the parent and child elements, then calculating how many items can (and cannot) fit.\n\nThis library, however, uses an `IntersectionObserver` to avoid costly measurements, instead relying on the browser to tell us when an element 'intersects' with the edge of the viewport. The result is faster - and generally snazzier.\n\n## How it works\n\nWhen initiated, the library creates a new version of your navigation with the required markup, including a toggle button:\n\n```html\n\u003cdiv data-main class=\"p-plus\"\u003e\n  \u003cdiv class=\"p-plus__primary-wrapper\"\u003e\n    \u003cul data-primary-nav class=\"p-plus__primary\" aria-hidden=\"false\"\u003e\n      \u003cli data-nav-item\u003e\n        \u003ca href=\"#\"\u003eHome\u003c/a\u003e\n      \u003c/li\u003e\n      \u003c!-- etc --\u003e\n    \u003c/ul\u003e\n  \u003c/div\u003e\n  \u003cbutton data-toggle-btn class=\"p-plus__toggle-btn\" aria-expanded=\"false\"\u003e\n    \u003cspan aria-label=\"More\"\u003e+ (0)\u003c/span\u003e\n  \u003c/button\u003e\n  \u003cul data-overflow-nav class=\"p-plus__overflow\" aria-hidden=\"true\"\u003e\u003c/ul\u003e\n\u003c/div\u003e\n```\n\nIt also *clones* this version, so there are actually two versions of the new navigation living on the page. One is the visible navigation that the library will add and remove elements from, and the other is an invisible copy that always retains the full set of nav items (which are forced to overflow horizontally).\n\n![Diagram showing how the clone navigation overflows the wrapper.](docs/img/how-it-works.png)\n\nAs the items overflow, they trigger the parent's `IntersectionObserver`. This means we can easily detect when (and in which direction) a new nav item clashes with the outer boundary of the navigation.\n\nOnce we detect a collision, we store which navigation it should now belong to (primary or overflow) and update both in the DOM.\n\n## Browser support\n\nThis library is designed to work with modern browsers. Both JavaScript bundles are transpiled down to ES6, and include syntax such as template-literals and the spread operator. If you'd like priorityPlus to work in (for instance) Internet Explorer, you'll need to bring your own transpilation down to ES5. When using Webpack, this would usually involve changing your `exclude` to be non-inclusive of the library:\n\n```\nexclude: /node_modules\\/(?!priority-plus)/,\n```\n\nYou will need to bring your own support for the `IntersectionObserver` API through a polyfill.\n\n## Installation\n\nInstall from [NPM](https://www.npmjs.com/package/priority-plus):\n\n```\nnpm install priority-plus\n```\n\nOr use a CDN if you're feeling old-school:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/priority-plus/dist/priority-plus.css\"\u003e\n\u003c!-- Will be available globally as priorityPlus --\u003e\n\u003cscript defer src=\"https://cdn.jsdelivr.net/npm/priority-plus/dist/priority-plus.js\"\u003e\u003c/script\u003e\n```\n\n## Setup\n\nYou can create a new instance by passing in an `HTMLElement` that is the direct parent of the navigation items:\n\n```html\n\u003cnav\u003e\n  \u003cul class=\"js-p-target\"\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eWork\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eServices longer nav title\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"/\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n```css\n// Doesn't have to be SASS, just ensure the CSS is included.\n@import \"node_modules/priority-plus/dist/priority-plus\";\n```\n\n```javascript\nimport priorityPlus from 'priority-plus';\npriorityPlus(document.querySelector('.js-p-target'));\n```\n\nIt's important that the element is the *immediate* parent, since internally the library iterates over the children as the basis for the new navigation items.\n\n## Methods\n\nThe following methods are available on a new instance, e.g.:\n\n```javascript\nconst inst = priorityPlus(document.querySelector('.js-p-target'));\nconsole.log(inst.getNavElements());\n```\n\n### `getNavElements(): { [key: string]?: HTMLElement|HTMLElement[] }`\n\nRetrieves an object containing references to each element in the primary generated navigation.\n\n### `on(eventType: string, cb: Function)`\n\nSets up an event listener on the instance (not the target element). See [events](#events) for a list of the events that are triggered.\n\nExample:\n```javascript\ninst.on('itemsChanged', () =\u003e console.log('Items changed'));\n```\n\n### `off(eventType: string, cb: Function)`\n\nDestroys an event listener.\n\nExample:\n```javascript\nconst callback = () =\u003e console.log('Items changed');\ninst.on('itemsChanged', callback);\n// etc\ninst.off('itemsChanged', callback);\n```\n\n### `setOverflowNavOpen(open: boolean)`\n\nOpens or closes the overflow navigation programatically.\n\nExample:\n```javascript\ninst.setOverflowNavOpen(true);\n```\n\n### `toggleOverflowNav()`\n\nOpens the overflow nav if closed, closes it if open.\n\nExample:\n```javascript\ninst.toggleOverflowNav();\n```\n\n## Options\n\n### `openOnToggle`\n\nYou can disable the default behaviour of automatically opening the overflow when the toggle is clicked by passing `false`. If you wanted to re-implement your own toggle behaviour, you could do so by listening for the `toggleClicked` event:\n\n```javascript\nconst inst = priorityPlus(document.querySelector('.js-p-target'), {\n  openOnToggle: false,\n})\n\ninst.on('toggleClicked', () =\u003e {\n  // Re-implement existing behaviour\n  inst.toggleOverflowNav();\n})\n```\n\n### `collapseAtCount`\n\nIf you'd like to collapse into the overflow when the primary navigation becomes depleted, you can do with the `collapseAtCount` option:\n\n```javascript\npriorityPlus(document.querySelector('.js-p-target'), {\n  collapseAtCount: 2,\n});\n```\n\nThe above will move all menu items into the overflow if only two can 'fit' into the primary. This is essentially a way to avoid orphan nav items.\n\n### Classes\nIf you'd like to override the default classes, you can pass in a `classNames` object like so:\n\n```javascript\npriorityPlus(document.querySelector('.js-p-target'), {\n  classNames: {\n    // Will override the p-plus class.\n    // Other classes will be un-touched.\n    wrapper: ['my-p-plus'],\n  },\n});\n```\n\nEach class override must be passed as an array.\n\n| Option | Default  | Explanation |\n|:--------|:----------|:-------------|\n| \u003cpre\u003e`container`\u003c/pre\u003e | \u003cpre\u003e`p-plus-container`\u003c/pre\u003e | This is the wrapper that collects both 'clones' of the navigation. Its purpose is to provide a way to obscure the clone.\n| \u003cpre\u003e`main`\u003c/pre\u003e | \u003cpre\u003e`p-plus`\u003c/pre\u003e | The class applied to each of the top-level navigation wrappers. Be aware it applies to both the clone and the visible copy.\n| \u003cpre\u003e`primary-nav-wrapper`\u003c/pre\u003e | \u003cpre\u003e`p-plus__primary-wrapper`\u003c/pre\u003e | Outer wrapper for the 'primary' (non-overflow) navigation.\n| \u003cpre\u003e`primary-nav`\u003c/pre\u003e | \u003cpre\u003e`p-plus__primary`\u003c/pre\u003e | Inner wrapper for the 'primary' (non-overflow) navigation.\n| \u003cpre\u003e`overflow-nav`\u003c/pre\u003e | \u003cpre\u003e`p-plus__overflow`\u003c/pre\u003e | Wrapper for the overflow navigation.\n| \u003cpre\u003e`toggle-btn`\u003c/pre\u003e | \u003cpre\u003e`p-plus__toggle-btn`\u003c/pre\u003e | Applied to the dropdown menu toggle button.\n\n### Templates \n\n#### `innerToggleTemplate(String|Function)`\n\n**Default:** 'More'\n\nOverrides the inner contents of the 'view more' button. If you pass a string, then it will only render once, but if you pass it a function it will re-render every time the navigation is updated.\n\nThe function receives an object containing two parameters, `toggleCount` (the number of items in the overflow) and `totalCount` (which is the total number of navigation items).\n\nExample:\n\n```javascript\npriorityPlus(document.querySelector('.js-p-target'), {\n  innerToggleTemplate: ({ toggleCount, totalCount }) =\u003e `\n    Menu${toggleCount \u0026\u0026 toggleCount !== totalCount ? ` (${toggleCount})` : ''}\n  `,\n});\n```\n\nBe aware that if you alter the width of the element by changing its content, you could create a loop wherein the button updates, triggering a new intersection, which causes the button to update (and so on). Therefore it's probably a good idea to apply a width to the button so it remains consistent.\n\n## Events\n\nArguments are provided via the `details` property.\n\n| Name            | Arguments                                                 | Description                                                             |\n|:----------------|:----------------------------------------------------------|:------------------------------------------------------------------------|\n| `showOverflow`  | None                                                      | Triggered when the overflow nav becomes visible.                        |\n| `hideOverflow`  | None                                                      | Triggered when the overflow nav becomes invisible.                      |\n| `itemsChanged`  | `overflowCount` (The number of items in the overflow nav) | Triggered when the navigation items are updated (either added/removed). |\n| `toggleClicked` | `original` (The original click event)                     | Triggered when the overflow toggle button is clicked.                   |\n\n## Defining a 'mobile' breakpoint\n\nYou should never have to base the amount of visible navigation items visible on the viewport size.\n\nHowever, if you would like to break (early) to the 'mobile' view at a pre-defined point, you can do so with just CSS.\n\nSimply add a rule that causes the first item in the navigation to expand beyond the viewport, like so:\n\n```css\n@media (max-width: 40em) {\n  .p-plus__primary \u003e li:first-child {\n    width: 100%;\n  }\n}\n```\n\n## Troubleshooting\n\n### Flex nav collapsing\n\nIf your menu is part of an auto-sized flex-child, it will probably need a positive `flex-grow` value to prevent it reverting to its smallest form. For instance:\n\n```html\n\u003cheader class=\"site-header\"\u003e\n  \u003ch1 class=\"site-header__title\"\u003eMy great site title\u003c/h1\u003e\n  \u003cnav class=\"site-header__nav\"\u003e\n    \u003cul class=\"site-nav js-site-nav\"\u003e\n      \u003cli\u003e\u003ca href=\"#\"\u003eServices\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#\"\u003eThinking\u003c/a\u003e\u003c/li\u003e\n      \u003cli\u003e\u003ca href=\"#\"\u003eEvents\u003c/a\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n  \u003c/nav\u003e\n\u003c/header\u003e\n```\n\n```css\n.site-header {\n  display: flex;\n  align-items: center;\n}\n\n/**\n * Prevents nav from collapsing.\n */\n.site-header__nav {\n  flex-grow: 1;\n}\n```\n\n### Navigation event listeners\n\npriorityPlus makes a copy of your menu, rather than reusing the original. Classes and attributes are carried over, but not event listeners. This means that any additional libraries or JavaScript which operate on the menu and its children needs to be run (or re-run) after initialization:\n\n```javascript\npriorityPlus(document.querySelector('.js-p-target'));\n// .js-p-target is *not* the same element, but has been cloned and replaced\nloadLibrary(document.querySelector('.js-p-target'));\n```\n\nIf your use-case is not covered by this, please raise an issue.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayfreestone%2Fpriority-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjayfreestone%2Fpriority-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjayfreestone%2Fpriority-plus/lists"}