metismenujs
v1.4.0
Published
MetisMenu: Collapsible menu plugin with Vanilla-JS
Downloads
136,684
Maintainers
Readme
Table of Contents
- Browser Support
- Installing
- Usage
- Options
- API
- Events
- CSS custom properties (variables)
- Migrating to v1.0.3 from v1.4.0
- Examples
- Demo
- About
Browser Support
This plugin does not support any version of IE browser.
| | | | | | --- | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | ❌ |
Install
Package Managers
Using npm:
npm install metismenujs
Using yarn:
yarn add metismenujs
Using pnpm:
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 yourtsconfig.json
:
{
"compilerOptions": {
"moduleResolution": "NodeNext"
}
}
CDN
ES6 UMD browser module
Using jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/metismenujs"></script>
Using unpkg CDN:
<script src="https://unpkg.com/metismenujs"></script>
ES6 ES module
Using jsDelivr CDN:
<script type="module">
import { MetisMenu } from 'https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.esm.min.js';
</script>
Using unpkg CDN:
<script type="module">
import { MetisMenu } from 'https://unpkg.com/metismenujs/dist/metismenujs.esm.min.js';
</script>
Install with composer
composer require onokumus/metismenujs:dev-master
Download
Ready to use files are located in the dist
directory.
Usage
Include metismenujs StyleSheet
Using CDN
jsDelivr :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenujs/dist/metismenujs.min.css">
unpkg :
<link rel="stylesheet" href="https://unpkg.com/metismenujs/dist/metismenujs.min.css">
Using Vite, Astro etc.
import 'metismenujs/style';
or sass source file
import 'metismenujs/sass';
Add class
metismenu
to unordered list
<ul class="metismenu" id="menu">
</ul>
- Make expand/collapse controls accessible
Be sure to add
aria-expanded
to the elementa
. 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 ofaria-expanded="false"
. If you've set the collapsible element's parentli
element to be open by default using theactive
class, setaria-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.
<ul class="metismenu" id="menu">
<li class="mm-active">
<a href="#" aria-expanded="true">Menu 1</a>
<ul>
...
</ul>
</li>
<li>
<a href="#" aria-expanded="false">Menu 2</a>
<ul>
...
</ul>
</li>
...
</ul>
- Arrow Options
add
has-arrow
class toa
element
<ul class="metismenu" id="menu">
<li class="mm-active">
<a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
<ul>
...
</ul>
</li>
<li>
<a class="has-arrow" href="#" aria-expanded="false">Menu 2</a>
<ul>
...
</ul>
</li>
...
</ul>
- Call the plugin:
new MetisMenu("#menu");
// or
MetisMenu.attach('#menu');
Stopping list opening on certain elements
Setting aria-disabled="true" in the <a>
element as shown will stop metisMenu opening the menu for that particular list. This can be changed dynamically and will be obeyed correctly:
<a href="#" aria-expanded="false" aria-disabled="true">List 1</a>
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.
const mm = new MetisMenu("#menu");
mm.dispose();
update
Re-init metisMenu.
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 tomm-active
Examples
https://github.com/metismenu/examples
Demo
https://onokumus.github.io/metismenujs
Contains a simple HTML file to demonstrate metisMenu plugin.
About
Related projects
- metismenu: A jQuery menu plugin | homepage
- @metismenu/react: react.js component for metismenu | homepage
Contributing
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Author
Osman Nuri Okumus
License
Copyright © 2023, Osman Nuri Okumuş. Released under the MIT License.