{"id":23228968,"url":"https://github.com/mrwweb/clicky-menus","last_synced_at":"2025-08-19T15:30:52.723Z","repository":{"id":43344203,"uuid":"348202682","full_name":"mrwweb/clicky-menus","owner":"mrwweb","description":"Simple click-triggered navigation submenus. Accessible and progressively enhanced.","archived":false,"fork":false,"pushed_at":"2025-05-28T14:42:52.000Z","size":91,"stargazers_count":98,"open_issues_count":2,"forks_count":17,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-08-19T13:26:06.007Z","etag":null,"topics":["accessibility","dropdown","menu","navigation","progressive-enhancement","submenu"],"latest_commit_sha":null,"homepage":"","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/mrwweb.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-16T03:33:34.000Z","updated_at":"2025-08-19T07:18:52.000Z","dependencies_parsed_at":"2024-05-21T18:32:55.594Z","dependency_job_id":null,"html_url":"https://github.com/mrwweb/clicky-menus","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/mrwweb/clicky-menus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrwweb%2Fclicky-menus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrwweb%2Fclicky-menus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrwweb%2Fclicky-menus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrwweb%2Fclicky-menus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mrwweb","download_url":"https://codeload.github.com/mrwweb/clicky-menus/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mrwweb%2Fclicky-menus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271166255,"owners_count":24710462,"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-19T02:00:09.176Z","response_time":63,"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":["accessibility","dropdown","menu","navigation","progressive-enhancement","submenu"],"created_at":"2024-12-19T01:15:46.288Z","updated_at":"2025-08-19T15:30:52.711Z","avatar_url":"https://github.com/mrwweb.png","language":"JavaScript","funding_links":["https://github.com/sponsors/mrwweb)!"],"categories":[],"sub_categories":[],"readme":"# Clicky Menus\n\nVersion 1.5.0\n\nJump to: [About](#about), [Features](#features), [Setup \u0026 Configuration](#setup--configuration), [Browser Support](#browser-support) [Changelog](#changelog)\n\n## About\n\nA project by Mark Root-Wiley, [MRW Web Design](https://MRWweb.com)\n\nClicky Menus lets you create a progressively enhanced, accessible one-level dropdown menu that opens when activated by click, touch, or `ENTER`/`SPACE`. The menu supports hover and keyboard navigation when JS is not enabled.\n\n[Demo on CodePen](https://codepen.io/mrwweb/pen/pXqKZO)\n\nWhy should you want menus that work this way? Read the accompanying article on CSS Tricks, [\"In Praise of the Unambiguous Click Menu\"](https://css-tricks.com/in-praise-of-the-unambiguous-click-menu/).\n\n\u003e [!TIP]\n\u003e Did this save you an hour? Did this save you four hours? Consider [sponsoring my work on the project](https://github.com/sponsors/mrwweb)!\n\n## Features\n\n- Supports interaction with mouse, touch, and keyboard\n- Converts parent menu items from links into buttons\n- Automatic `aria-expanded`, `aria-controls` and `aria-hidden` support\n- Close open submenu with `ESC` key\n- Close open submenu with click outside of open menu\n- Basic offscreen-menu prevention\n- [Configure custom submenu selector](#custom-submenu-selector)\n- [Close open submenus with a button](#closing-open-submenus-with-data-attribute-or-custom-javascript-event)\n\n### Why only one level of submenu?\n\nThis script only supports a single level of submenus, i.e., there are no \"sub-sub-menus\" or \"tertiary menus\". This is intentional because:\n\n1. I don't like them. Nested dropdowns are a \"navigation smell\"—_a la_ \"code smell\"—and can often be avoided for better results.\n2. This makes it very easy to [make \"mega menus\"](#custom-submenu-selector) that contain nested lists (basically permanently visible sub-submenus menus).\n\nIf you really want this feature, there's an [open issue for sharing use cases](https://github.com/mrwweb/clicky-menus/issues/8). If you want to submit a pull request, please coordinate on that issue before doing any work!\n\n## Setup \u0026 Configuration\n\nClicky Menus requires one JS file, one CSS file, and a list with the class `clicky-menu`.\n\n### Installation\n\nYou can install Clicky Menus by copying and pasting the files into your project. You can also use git or npm.\n\nWith git:\n\n`$ git clone https://github.com/mrwweb/clicky-menus.git`\n\nWith npm:\n\n`$ npm install clicky-menus`\n\n### Building a Clicky Menu\n\nOnce you have the files:\n\n1. Load `clicky-menus.js` anywhere in the DOM and `clicky-menus.css` in the `\u003chead\u003e`.\n2. Put the `clicky-menu` and `no-js` classes on the top-level `\u003cul\u003e` element containing your menu\n3. Style your menus however you like. `clicky-menus.css` provides the most minimal styles for menu functionality so you can customize the design to your liking. [See the demo](https://codepen.io/mrwweb/pen/pXqKZO) for one example of how you could style this, including submenu animations!\n\nMost of the time, Clicky Menus requires no configuration!\n\n### Custom submenu selector\n\nIf you have unusual markup or design requirements, you can set a custom selector to target submenu elements. Do this by adding a `data-clicky-submenu-selector` attribute on the top-level `\u003cul\u003e` element (the same one with the `clicky-menu` class) that contains a valid CSS selector.\n\nFor example, if you only want to only select the first level of nested `\u003cul\u003e` elements while building a megamenu, you would do:\n\n```html\n\u003cul class=\"clicky-menu\" data-clicky-submenu-selector=\".clicky-menu \u003e li \u003e ul\"\u003e\n    \u003c!-- menu items --\u003e\n\u003c/ul\u003e\n```\n\n### Closing open submenus with data attribute or custom JavaScript event\n\nThere are a variety of situations where you might want to force submenus to close based on interactions elsewhere on the page. For example, maybe an adjacent search toggle overlaps with submenus when expanded.\n\nTo close all open submenus, dispatch the custom event `clickyMenusClose` to the `.clicky-menu` DOM node (usually the `\u003cul\u003e` containing menu items).\n\n#### With data attribute\n\nWhere `my-menu` is the ID of the menu you want to close and is the element with the `clicky-menu` class:\n\n```html\n\u003cbutton data-clicky-menus-close=\"my-menu\"\u003eClose Open Submenus\u003c/button\u003e\n```\n\n#### With custom JavaScript event\n\n```html\n\u003cbutton id=\"close-open-submenus\"\u003eClose Open Submenus\u003c/button\u003e\n```\n\n```js\n// select the menu to manipulate\nconst myMenu = document.getElementById('my-menu');\n\n// the element that triggers the close event\nconst closeButton = document.getElementById('close-open-submenus');\n\n// dispatch the custom event when clicking the button\ncloseButton.addEventListener('click', () =\u003e {\n    myMenu.dispatchEvent( new Event( 'clickyMenusClose' );\n});\n```\n\n## Expected markup and markup transformation\n\n```html\n\u003cnav id=\"primary-nav\"\u003e\u003c!-- menu parent element must have an ID --\u003e\n \u003cul class=\"clicky-menu no-js\"\u003e\n  \u003cli\u003e\n   \u003ca href=\"#\" class=\"a-custom-class\"\u003eParent Menu Item 1\u003c/a\u003e\n   \u003cul\u003e\n    \u003cli\u003e\u003ca href=\"page-1a.html\"\u003eSubmenu Item 1a\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"page-1b.html\"\u003eSubmenu Item 1b\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"page-1c.html\"\u003eSubmenu Item 1c\u003c/a\u003e\u003c/li\u003e\n   \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003c!-- etc… --\u003e\n \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\nOnce the script runs, the markup is changed to:\n\n```html\n\u003cnav id=\"primary-nav\"\u003e \u003c!-- element must have an ID --\u003e\n \u003cul class=\"clicky-menu no-js\"\u003e\n  \u003cli\u003e\n   \u003cbutton aria-expanded=\"false\" aria-controls=\"parent-menu-item-1-submenu\" class=\"a-custom-class\"\u003eParent Menu Item 1\u003c/button\u003e\n   \u003cul id=\"parent-menu-item-1-submenu\" aria-hidden=\"true\"\u003e\n    \u003cli\u003e\u003ca href=\"page-1a.html\"\u003eSubmenu Item 1a\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"page-1b.html\"\u003eSubmenu Item 1b\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"page-1c.html\"\u003eSubmenu Item 1c\u003c/a\u003e\u003c/li\u003e\n   \u003c/ul\u003e\n  \u003c/li\u003e\n  \u003c!-- etc… --\u003e\n \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\n### Notes on markup transformation\n\n- All attributes on links converted to buttons are retained except for `href`.\n- All elements inside links converted to buttons, such as an SVG icon, are retained in the button.\n- When a user clicks a submenu toggle button (i.e., parent menu item), `aria-expanded` and `aria-hidden` are appropriately toggled between `true` and `false`.\n\n## Browser Support\n\nAll Modern Browsers such as Firefox, Chrome, Edge, and Safari.\n\nInternet Explorer 11 support is possible if you include polyfills for [`closest`](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill) and [`NodeList.forEach`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill) and transpile your code with something like Babel.\n\n## Changelog\n\n### 1.5.0 (May 27, 2025)\n\n- Change `ESC` key event handler to fire on `keydown` instead of `keyup` and use `.preventDefault()` instead of `.stopPropogation()` when focus is inside a submenu or parent of open submenu. This will prevent the `ESC` key from closing `dialog` elements when a clicky-menu is inside one.\n\n### 1.4.0 (April 29, 2025)\n\n- Further differentiate automatically-generated submenu IDs by including a unique ID for each clicky-menu.\n\n### 1.3.0 (April 25, 2025)\n\n- NEW! Use the `data-clicky-menus-close` attribute on any element to automatically close the open submenu. It should be set to the ID of the element with the `clicky-menu` class. Fixes #21.\n- Don't let `ESC` propogate when pressed on an item inside a submenu. This should generally prevent dialogs and other toggle features from closing when they contain a menu. Fixes #22\n- Strip special characters from automatically generated submenu IDs and add an increment (e.g. `-1`) to the end of each ID to get much closer to guaranteeing it is unique. Fixes #12\n\n### 1.2.0 (May 21, 2024)\n\n- You can now close open submenus from 3rd-party JS with the `clickyMenusClose` event\n- The default CSS will now correctly position submenus relative to the parent list item\n\n### 1.1.0 (October 19, 2023)\n\n- Add support for [data attribute that sets custom submenu selector](#custom-submenu-selector)\n- Fix mismatched variable name leading to broken submenu IDs\n- Improve documentation in the readme\n\n### 1.0.0 (March 15, 2021)\n\n- It's alive!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrwweb%2Fclicky-menus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmrwweb%2Fclicky-menus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmrwweb%2Fclicky-menus/lists"}