https://github.com/onokumus/metismenujs
MetisMenu: Collapsible menu plugin with Vanilla-JS
https://github.com/onokumus/metismenujs
menu metismenu plugin vanilla-js
Last synced: 16 days ago
JSON representation
MetisMenu: Collapsible menu plugin with Vanilla-JS
- Host: GitHub
- URL: https://github.com/onokumus/metismenujs
- Owner: onokumus
- License: mit
- Created: 2018-07-12T07:43:34.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-11-14T21:34:51.000Z (5 months ago)
- Last Synced: 2025-04-01T12:04:27.216Z (23 days ago)
- Topics: menu, metismenu, plugin, vanilla-js
- Language: TypeScript
- Homepage: https://onokumus.github.io/metismenujs/
- Size: 917 KB
- Stars: 129
- Watchers: 2
- Forks: 22
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://www.npmjs.org/package/metismenujs)
[](https://packagephobia.now.sh/result?p=metismenujs)
[](https://bundlephobia.com/package/metismenujs@latest)
[](https://npm-stat.com/charts.html?package=metismenujs)
[](https://www.jsdelivr.com/package/npm/metismenujs) [](https://packagist.org/packages/onokumus/metismenujs)
## 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
> This plugin does not support any version of IE browser.
 |  |  |  |  |  |
--- | --- | --- | --- | --- | --- |
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | ❌ |
## Install
### Package Managers
Using [npm](https://www.npmjs.com/):
```bash
npm install metismenujs
```
Using [yarn](https://yarnpkg.com):
```sh
yarn add metismenujs
```
Using [pnpm](https://pnpm.io/):
```sh
pnpm add metismenujs
```
Once the package is installed, you can import the library using `import` or `require` approach:
```js
// recommended approach
import { MetisMenu } from 'metismenujs';
```
```js
// You can also use the default export
import MetisMenu from 'metismenujs';
```
If you use `require` for importing, **only default export is available**:
```js
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`:
```json
{
"compilerOptions": {
"moduleResolution": "NodeNext"
}
}
```
### CDN
#### ES6 UMD browser module
Using [jsDelivr](https://www.jsdelivr.com/) CDN:
```html
```
Using [unpkg](https://unpkg.com/) CDN:
```html
```
#### ES6 ES module
Using [jsDelivr](https://www.jsdelivr.com/) CDN:
```html
import { MetisMenu } from 'https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.esm.min.js';
```
Using [unpkg](https://unpkg.com/) CDN:
```html
import { MetisMenu } from 'https://unpkg.com/metismenujs/dist/metismenujs.esm.min.js';
```
Install with [composer](https://getcomposer.org/)
```bash
composer require onokumus/metismenujs:dev-master
```
### Download
[download](https://github.com/onokumus/metismenujs/archive/master.zip)
Ready to use files are located in the `dist` directory.
## Usage
1. Include metismenujs StyleSheet
### Using CDN
[jsDelivr](https://www.jsdelivr.com/) :
```html
```
[unpkg](https://unpkg.com/) :
```html
```
### Using [Vite](https://vitejs.dev/), [Astro](https://astro.build/) etc.
```js
import 'metismenujs/style';
```
or sass source file
```js
import 'metismenujs/sass';
```
2. Add class `metismenu` to unordered list
```html
```
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.
```html
```
4. Arrow Options
> add `has-arrow` class to `a` element
```html
```
5. Call the plugin:
```javascript
new MetisMenu("#menu");
// or
MetisMenu.attach('#menu');
```
### 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:
```html
List 1
```
## Options
| Option | Type | Default | Description | Example |
| --- | --- | --- | --- | --- |
| toggle | Boolean | true | For auto collapse support. | `new MetisMenu("#menu", { toggle: false });` |
| triggerElement | css selector | a | | `new MetisMenu("#menu", { triggerElement: '.nav-link' });` |
| parentTrigger | css selector | li | | `new MetisMenu("#menu", { parentTrigger: '.nav-item' });` |
| subMenu | css selector | ul | | `new MetisMenu("#menu", { subMenu: '.nav.flex-column' });` |
## API
### dispose
For stop and destroy metisMenu.
```javascript
const mm = new MetisMenu("#menu");
mm.dispose();
```
### update
Re-init metisMenu.
```javascript
const mm = new MetisMenu("#menu");
mm.dispose();
// ajax ...
mm.update();
```
## Events
|**Event Type** |**Description**|
|--------------|--------------|
|show.metisMenu |This event fires immediately when the `show` instance method is called.|
|shown.metisMenu |This event is fired when a collapse `ul` element has been made visible to the user (will wait for CSS transitions to complete).|
|hide.metisMenu |This event is fired immediately when the `hide` method has been called. |
|hidden.metisMenu |This 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)
|**Property** | **Default** |**Description** |
|--------------|--------------|--------------|
|--mm-transition-timing-function | ease |This property sets how intermediate values are calculated for CSS properties being affected by a transition effect. |
|--mm-trantisition-duration | 0.35s |This property sets the length of time a transition animation should take to complete. |
## Migrating to v1.0.3 from v1.4.0
- Update `metisMenu.js` & `metisMenu.css` files
- Change `active` class to `mm-active`
## Examples
[https://github.com/metismenu/examples](https://github.com/metismenu/examples)
## Demo
[https://onokumus.github.io/metismenujs](https://onokumus.github.io/metismenujs)
Contains a simple HTML file to demonstrate metisMenu plugin.
## About
### 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
Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](../../issues/new).
### Author
**Osman Nuri Okumus**
+ [GitHub Profile](https://github.com/onokumus)
+ [Twitter Profile](https://twitter.com/onokumus)
+ [LinkedIn Profile](https://linkedin.com/in/onokumus)
### License
Copyright © 2023, [Osman Nuri Okumuş](https://github.com/onokumus).
Released under the [MIT License](LICENSE).