PHPackages onokumus/metismenujs - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. onokumus/metismenujs ActiveLibrary[Utility & Helpers](/categories/utility) onokumus/metismenujs ==================== A menu plugin v1.4.0(3y ago)13210.2k22[8 issues](https://github.com/onokumus/metismenujs/issues)MITTypeScript Since Jul 22Pushed 1y ago2 watchersCompare [ Source](https://github.com/onokumus/metismenujs)[ Packagist](https://packagist.org/packages/onokumus/metismenujs)[ Docs](https://github.com/onokumus/metismenujs)[ RSS](/packages/onokumus-metismenujs/feed)WikiDiscussions master Synced 1mo ago READMEChangelogDependenciesVersions (15)Used By (0) [metismenujs](https://onokumus.github.io/metismenujs) ======================================================= [](#--------metismenujs----) Collapsible menu plugin with Vanilla-JS [![npm version](https://camo.githubusercontent.com/0c5bf9dd449a6ff1ef4c93126fd3afdac65eff98965e3f4158ff1cb55dc4c35c/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6d657469736d656e756a732e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.org/package/metismenujs)[![install size](https://camo.githubusercontent.com/b6a5768bbb5e68d413c0c3cc7693b3adaf3b0007ddd15c29f90647c72ff81e20/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f64796e616d69632f6a736f6e3f75726c3d68747470733a2f2f7061636b61676570686f6269612e636f6d2f76322f6170692e6a736f6e3f703d6d657469736d656e756a732671756572793d242e696e7374616c6c2e707265747479266c6162656c3d696e7374616c6c25323073697a65267374796c653d666c61742d737175617265)](https://packagephobia.now.sh/result?p=metismenujs)[![npm bundle size](https://camo.githubusercontent.com/79cb9c572be35f37d122f361b91ca7581d80364a3e4c2af4f0267ebda7b15a19/68747470733a2f2f696d672e736869656c64732e696f2f62756e646c6570686f6269612f6d696e7a69702f6d657469736d656e756a733f7374796c653d666c61742d737175617265)](https://bundlephobia.com/package/metismenujs@latest)[![npm downloads](https://camo.githubusercontent.com/1f8cf9c66b4b3d4609cadae068c16940fe327e36584a86edc3beef3bfd5c74b2/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f6d657469736d656e756a732e7376673f7374796c653d666c61742d737175617265)](https://npm-stat.com/charts.html?package=metismenujs)[![](https://camo.githubusercontent.com/09220c371531c7b485f069189595c51a5ca2dfe328f698e47bf3c3b5c2f4a7ee/68747470733a2f2f646174612e6a7364656c6976722e636f6d2f76312f7061636b6167652f6e706d2f6d657469736d656e756a732f6261646765)](https://www.jsdelivr.com/package/npm/metismenujs) [![Packagist](https://camo.githubusercontent.com/a6db82417fb49a3985c19069d2316e52ba5efe4f24be5fa0d02986969fff2291/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f6e6f6b756d75732f6d657469736d656e756a732e737667)](https://packagist.org/packages/onokumus/metismenujs) Table of Contents ----------------- [](#table-of-contents) - [Browser Support](#browser-support) - [Installing](#installing) - [Package manager](#package-manager) - [CDN](#cdn) - [Usage](#usage) - [Stopping list opening on certain elements](#stopping-list-opening-on-certain-elements) - [Options](#options) - [API](#api) - [dispose](#dispose) - [update](#update) - [Events](#events) - [CSS custom properties (variables)](#css-custom-properties-variables) - [Migrating to v1.0.3 from v1.4.0](#migrating-to-v103-from-v140) - [Examples](#examples) - [Demo](#demo) - [About](#about) - [Related projects](#related-projects) - [Contributing](#contributing) - [Author](#author) - [License](#license) Browser Support --------------- [](#browser-support) > This plugin does not support any version of IE browser. [![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png)](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png)[![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png)](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png)[![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png)](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png)[![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png)](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png)[![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png)](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png)[![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png)](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png)Latest ✔Latest ✔Latest ✔Latest ✔Latest ✔❌Install ------- [](#install) ### Package Managers [](#package-managers) Using [npm](https://www.npmjs.com/): ``` npm install metismenujs ``` Using [yarn](https://yarnpkg.com): ``` yarn add metismenujs ``` Using [pnpm](https://pnpm.io/): ``` pnpm add metismenujs ``` Once the package is installed, you can import the library using `import` or `require` approach: ``` // recommended approach import { MetisMenu } from 'metismenujs'; ``` ``` // You can also use the default export import MetisMenu from 'metismenujs'; ``` If you use `require` for importing, **only default export is available**: ``` const MetisMenu = require('metismenujs'); ``` > **Note** CommonJS usage In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with `require()`, add the following to your `tsconfig.json`: ``` { "compilerOptions": { "moduleResolution": "NodeNext" } } ``` ### CDN [](#cdn) #### ES6 UMD browser module [](#es6-umd-browser-module) Using [jsDelivr](https://www.jsdelivr.com/) CDN: ``` ``` Using [unpkg](https://unpkg.com/) CDN: ``` ``` #### ES6 ES module [](#es6-es-module) Using [jsDelivr](https://www.jsdelivr.com/) CDN: ``` import { MetisMenu } from 'https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.esm.min.js'; ``` Using [unpkg](https://unpkg.com/) CDN: ``` import { MetisMenu } from 'https://unpkg.com/metismenujs/dist/metismenujs.esm.min.js'; ``` Install with [composer](https://getcomposer.org/) ``` composer require onokumus/metismenujs:dev-master ``` ### Download [](#download) [download](https://github.com/onokumus/metismenujs/archive/master.zip) Ready to use files are located in the `dist` directory. Usage ----- [](#usage) 1. Include metismenujs StyleSheet ### Using CDN [](#using-cdn) [jsDelivr](https://www.jsdelivr.com/) : ``` ``` [unpkg](https://unpkg.com/) : ``` ``` ### Using [Vite](https://vitejs.dev/), [Astro](https://astro.build/) etc. [](#using-vite-astro-etc) ``` import 'metismenujs/style'; ``` or sass source file ``` import 'metismenujs/sass'; ``` 2. Add class `metismenu` to unordered list ``` ``` 3. Make expand/collapse controls accessible > Be sure to add `aria-expanded` to the element `a`. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of `aria-expanded="false"`. If you've set the collapsible element's parent `li` element to be open by default using the `active` class, set `aria-expanded="true"` on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed. ``` Menu 1 ... Menu 2 ... ... ``` 4. Arrow Options > add `has-arrow` class to `a` element ``` Menu 1 ... Menu 2 ... ... ``` 5. Call the plugin: ``` new MetisMenu("#menu"); // or MetisMenu.attach('#menu'); ``` ### Stopping list opening on certain elements [](#stopping-list-opening-on-certain-elements) Setting aria-disabled="true" in the `` element as shown will stop metisMenu opening the menu for that particular list. This can be changed dynamically and will be obeyed correctly: ``` List 1 ``` Options ------- [](#options) OptionTypeDefaultDescriptionExampletoggleBooleantrueFor auto collapse support.`new MetisMenu("#menu", { toggle: false });`triggerElementcss selectora`new MetisMenu("#menu", { triggerElement: '.nav-link' });`parentTriggercss selectorli`new MetisMenu("#menu", { parentTrigger: '.nav-item' });`subMenucss selectorul`new MetisMenu("#menu", { subMenu: '.nav.flex-column' });`API --- [](#api) ### dispose [](#dispose) For stop and destroy metisMenu. ``` const mm = new MetisMenu("#menu"); mm.dispose(); ``` ### update [](#update) Re-init metisMenu. ``` const mm = new MetisMenu("#menu"); mm.dispose(); // ajax ... mm.update(); ``` Events ------ [](#events) **Event Type****Description**show.metisMenuThis event fires immediately when the `show` instance method is called.shown.metisMenuThis event is fired when a collapse `ul` element has been made visible to the user (will wait for CSS transitions to complete).hide.metisMenuThis event is fired immediately when the `hide` method has been called.hidden.metisMenuThis event is fired when a collapse `ul` element has been hidden from the user (will wait for CSS transitions to complete).CSS custom properties (variables) --------------------------------- [](#css-custom-properties-variables) **Property****Default****Description**--mm-transition-timing-functioneaseThis property sets how intermediate values are calculated for CSS properties being affected by a transition effect.--mm-trantisition-duration0.35sThis property sets the length of time a transition animation should take to complete.Migrating to v1.0.3 from v1.4.0 ------------------------------- [](#migrating-to-v103-from-v140) - Update `metisMenu.js` & `metisMenu.css` files - Change `active` class to `mm-active` Examples -------- [](#examples) Demo ---- [](#demo) Contains a simple HTML file to demonstrate metisMenu plugin. About ----- [](#about) ### Related projects [](#related-projects) - [metismenu](https://www.npmjs.com/package/metismenu): A jQuery menu plugin | [homepage](https://github.com/onokumus/metismenu) - [@metismenu/react](https://www.npmjs.com/package/@metismenu/react): react.js component for metismenu | [homepage](https://github.com/metismenu/metismenu-react) ### Contributing [](#contributing) Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](../../issues/new). ### Author [](#author) **Osman Nuri Okumus** - [GitHub Profile](https://github.com/onokumus) - [Twitter Profile](https://twitter.com/onokumus) - [LinkedIn Profile](https://linkedin.com/in/onokumus) ### License [](#license) Copyright © 2023, [Osman Nuri Okumuş](https://github.com/onokumus). Released under the [MIT License](LICENSE). ### Health Score 42 — FairBetter than 90% of packages Maintenance29 Infrequent updates — may be unmaintained Popularity39 Limited adoption so far Community15 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 97.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~136 days Recently: every ~128 days Total 13 Last Release 1222d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/638c294d40392fed3cec1d1da34410b03460fc277ba164f5218f6c586d801365?d=identicon)[onokumus](/maintainers/onokumus) --- Top Contributors [![onokumus](https://avatars.githubusercontent.com/u/742498?v=4)](https://github.com/onokumus "onokumus (136 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (3 commits)") --- Tags menumetismenupluginvanilla-jspluginwebcssJSmenu ### Embed Badge ![Health badge](/badges/onokumus-metismenujs/health.svg) ``` [![Health](https://phpackages.com/badges/onokumus-metismenujs/health.svg)](https://phpackages.com/packages/onokumus-metismenujs) ``` ### Alternatives [onokumus/metismenu A jQuery menu plugin 2.0k263.3k5](/packages/onokumus-metismenu)[matthiasmullie/minify CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns. 2.0k30.5M336](/packages/matthiasmullie-minify)[sciactive/pnotify Beautiful JavaScript notifications. 3.6k6.4k](/packages/sciactive-pnotify)[stolz/assets An ultra-simple-to-use assets management library 296519.2k8](/packages/stolz-assets)[kartik-v/yii2-widget-sidenav An enhanced side navigation menu styled for bootstrap (sub repo split from yii2-widgets) 364.0M8](/packages/kartik-v-yii2-widget-sidenav)[jalle19/php-yui-compressor A modern PHP wrapper for the YUI compressor 17972.2k3](/packages/jalle19-php-yui-compressor) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)