### Install MetisMenuJS with yarn
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Use this command to install MetisMenuJS using yarn.
```bash
yarn add metismenujs
```
--------------------------------
### Installation and Basic Usage
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Instructions on how to include MetisMenuJS in your project and initialize it on an unordered list.
```APIDOC
## Installation and Basic Usage
### Include Stylesheets
```html
```
### Include JavaScript
```html
```
### HTML Structure
Add the `metismenu` class to your unordered list.
```html
```
### Initialize MetisMenu
```javascript
new MetisMenu("#menu");
// or
MetisMenu.attach('#menu');
```
```
--------------------------------
### Install MetisMenuJS with Composer
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Use this command to install MetisMenuJS using Composer.
```bash
composer require onokumus/metismenujs:dev-master
```
--------------------------------
### Install MetisMenuJS with npm
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Use this command to install MetisMenuJS using npm.
```bash
npm install metismenujs
```
--------------------------------
### Install MetisMenu JS with npm, yarn, or pnpm
Source: https://context7.com/onokumus/metismenujs/llms.txt
Install the MetisMenu JS package using your preferred package manager.
```bash
# Using npm
npm install metismenujs
# Using yarn
yarn add metismenujs
# Using pnpm
pnpm add metismenujs
```
--------------------------------
### Install MetisMenuJS with pnpm
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Install the MetisMenuJS package using pnpm. This is another alternative package manager.
```bash
pnpm add metismenujs
```
--------------------------------
### Complete MetisMenuJS Integration with Bootstrap
Source: https://context7.com/onokumus/metismenujs/llms.txt
This example shows how to integrate MetisMenuJS into a Bootstrap-styled sidebar. It includes event listeners for menu state changes and demonstrates dynamic menu item addition and programmatic toggling.
```html
MetisMenu Demo
Content Area
```
--------------------------------
### Include MetisMenu JS via CDN
Source: https://context7.com/onokumus/metismenujs/llms.txt
Include the MetisMenu JS stylesheet and JavaScript file directly in your HTML using CDN links for quick setup.
```html
```
--------------------------------
### Initialize MetisMenuJS for FAQ
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-faq.html
Use this configuration to initialize MetisMenuJS for an FAQ-style menu. Ensure the CSS and JS files are included. The `toggle: false` option prevents automatic opening of all submenus on initialization.
```javascript
new MetisMenu('.faq-menu', {
toggle: false,
triggerElement: '.faq-link',
parentTrigger: '.faq-item',
subMenu: '.faq-answer'
});
```
--------------------------------
### Import and Initialize MetisMenuJS
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Import MetisMenuJS and create a new instance. You can also use the static attach method.
```javascript
import MetisMenu from 'metismenujs';
// or
const MetisMenu = require('metismenujs');
// create new instance
const mm = new MetisMenu('#menu', {...});
// or call MetisMenu static attach method
const mm = MetisMenu.attach('#menu', {...})
```
--------------------------------
### Basic MetisMenu JS Initialization
Source: https://context7.com/onokumus/metismenujs/llms.txt
Create a new MetisMenu instance by passing a CSS selector or DOM element to the constructor. Basic initialization requires only the selector.
```javascript
// Basic initialization
const menu = new MetisMenu('#menu');
// Or use the static attach method
const menu = MetisMenu.attach('#menu');
// Initialize with DOM element
const element = document.getElementById('menu');
const menu = new MetisMenu(element);
```
--------------------------------
### Initialize MetisMenu JS with Static Attach Method
Source: https://context7.com/onokumus/metismenujs/llms.txt
Use the static MetisMenu.attach() method as an alternative syntax for creating and returning a new MetisMenu instance.
```javascript
// Using static attach method
const menu = MetisMenu.attach('#sidebar-menu');
// With options
const menu = MetisMenu.attach('#navigation', {
toggle: true,
triggerElement: 'a',
parentTrigger: 'li',
subMenu: 'ul'
});
// Attach to DOM element
const navElement = document.querySelector('.main-nav');
const menu = MetisMenu.attach(navElement, { toggle: false });
```
--------------------------------
### Initialize Folder View Menu
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-folder.html
Initializes the MetisMenuJS with folder view enabled. Ensure the DOM is fully loaded before initialization. The `toggle: false` option prevents automatic toggling on initialization.
```javascript
document.addEventListener("DOMContentLoaded", function(event) {
new MetisMenu(".metisFolder", {
toggle: false
});
});
```
--------------------------------
### MetisMenuJS Options
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Configuration options available when initializing MetisMenuJS.
```APIDOC
## Options
| Option | Type | Default | Description | Example |
| --- | --- | --- | --- | --- |
| `toggle` | Boolean | `true` | Enables or disables auto collapse support. | `new MetisMenu("#menu", { toggle: false });` |
| `triggerElement` | css selector | `a` | Selector for the element that triggers menu expansion/collapse. | `new MetisMenu("#menu", { triggerElement: '.nav-link' });` |
| `parentTrigger` | css selector | `li` | Selector for the parent element of the trigger. | `new MetisMenu("#menu", { parentTrigger: '.nav-item' });` |
| `subMenu` | css selector | `ul` | Selector for the submenu element. | `new MetisMenu("#menu", { subMenu: '.nav.flex-column' });` |
```
--------------------------------
### MetisMenuJS Initialization and Usage
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Steps to include MetisMenuJS in your project and initialize it on an unordered list.
```APIDOC
## Include MetisMenuJS Stylesheet
### Using CDN
**jsDelivr:**
```html
```
**unpkg:**
```html
```
### Using Vite, Astro, etc.
```js
import 'metismenujs/style';
// or for sass source file
// import 'metismenujs/sass';
```
## Add `metismenu` class to unordered list
```html
```
## Initialize MetisMenu
Call the plugin on your menu element.
```javascript
new MetisMenu("#menu");
// or using the static method
// MetisMenu.attach('#menu');
```
## Stop list opening on certain elements
Set `aria-disabled="true"` on an `` element to prevent MetisMenu from opening its submenu.
```html
List 1
```
```
--------------------------------
### Initialize MetisMenuJS
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Initialize MetisMenuJS on your menu element using either the constructor or the attach method.
```javascript
new MetisMenu("#menu");
// or
MetisMenu.attach('#menu');
```
--------------------------------
### Configuration Options
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Available options to customize MetisMenuJS behavior.
```APIDOC
## Configuration Options
### `toggle`
- **Type:** `Boolean`
- **Default:** `true`
- **Description:** Enables or disables auto collapse support.
```javascript
new MetisMenu("#menu", {
toggle: false
});
```
### `triggerElement`
- **Type:** `css selector`
- **Default:** `a`
- **Description:** Selector for the element that triggers menu expansion/collapse.
```javascript
new MetisMenu("#menu", {
triggerElement: '.nav-link' // Example for Bootstrap 4
});
```
### `parentTrigger`
- **Type:** `css selector`
- **Default:** `li`
- **Description:** Selector for the parent element of the trigger.
```javascript
new MetisMenu("#menu", {
parentTrigger: '.nav-item' // Example for Bootstrap 4
});
```
### `subMenu`
- **Type:** `css selector`
- **Default:** `ul`
- **Description:** Selector for the submenu elements.
```javascript
new MetisMenu("#menu", {
subMenu: '.nav.flex-column' // Example for Bootstrap 4
});
```
```
--------------------------------
### on(eventType, handler, options) Method
Source: https://context7.com/onokumus/metismenujs/llms.txt
Registers an event listener for MetisMenu events. This method returns the MetisMenu instance, allowing for method chaining. Supported events are: `show.metisMenu`, `shown.metisMenu`, `hide.metisMenu`, and `hidden.metisMenu`.
```APIDOC
## on(eventType, handler, options)
Registers an event listener for MetisMenu events. This method returns the MetisMenu instance, allowing for method chaining. Supported events are: `show.metisMenu`, `shown.metisMenu`, `hide.metisMenu`, and `hidden.metisMenu`.
### Parameters
- **eventType** (string) - The type of event to listen for (e.g., 'show.metisMenu').
- **handler** (function) - The callback function to execute when the event is triggered.
- **options** (object, optional) - Options for the event listener.
### Usage
```javascript
const menu = new MetisMenu('#menu');
// Listen for menu show event (fires immediately when show is called)
menu.on('show.metisMenu', (event) => {
console.log('Menu is opening:', event.detail.showElement);
});
// Listen for menu shown event (fires after CSS transition completes)
menu.on('shown.metisMenu', (event) => {
console.log('Menu is now visible:', event.detail.shownElement);
// Scroll into view if needed
event.detail.shownElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});
// Listen for menu hide event (fires immediately when hide is called)
menu.on('hide.metisMenu', (event) => {
console.log('Menu is closing:', event.detail.hideElement);
});
// Listen for menu hidden event (fires after CSS transition completes)
menu.on('hidden.metisMenu', (event) => {
console.log('Menu is now hidden:', event.detail.hiddenElement);
});
```
### Method Chaining
```javascript
menu
.on('show.metisMenu', handleShow)
.on('shown.metisMenu', handleShown)
.on('hide.metisMenu', handleHide)
.on('hidden.metisMenu', handleHidden);
```
### Practical Example: Track menu analytics
```javascript
menu.on('shown.metisMenu', (event) => {
const menuItem = event.detail.shownElement.closest('li');
const menuLabel = menuItem.querySelector('a').textContent;
analytics.track('menu_expanded', { label: menuLabel });
});
```
```
--------------------------------
### Initialize MetisMenu JS with ES Module from CDN
Source: https://context7.com/onokumus/metismenujs/llms.txt
Initialize MetisMenu JS using an ES Module import directly from a CDN link within a script tag.
```javascript
```
--------------------------------
### MetisMenu.attach() Static Method
Source: https://context7.com/onokumus/metismenujs/llms.txt
Static factory method that creates and returns a new MetisMenu instance. This provides an alternative syntax for instantiation that some developers may find more readable.
```APIDOC
## MetisMenu.attach(element, options)
### Description
Static factory method that creates and returns a new MetisMenu instance. This provides an alternative syntax for instantiation that some developers may find more readable.
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
// Using static attach method
const menu = MetisMenu.attach('#sidebar-menu');
// With options
const menu = MetisMenu.attach('#navigation', {
toggle: true,
triggerElement: 'a',
parentTrigger: 'li',
subMenu: 'ul'
});
// Attach to DOM element
const navElement = document.querySelector('.main-nav');
const menu = MetisMenu.attach(navElement, { toggle: false });
```
### Response
#### Success Response (200)
None
#### Response Example
None
```
--------------------------------
### Import MetisMenuJS using ES6 import
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Import the MetisMenuJS library using the ES6 import syntax. This is the recommended approach.
```javascript
import { MetisMenu } from 'metismenujs';
```
--------------------------------
### Initialize MetisMenuJS with Event Listener
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-event2.html
Initialize MetisMenuJS on a '#menu' element and attach a 'shown.metisMenu' event listener. The event object is logged to the console when a menu item is shown.
```javascript
new MetisMenu('#menu')
.on('shown.metisMenu', function(event) {
console.log(event);
});
```
--------------------------------
### Configuration Options
Source: https://context7.com/onokumus/metismenujs/llms.txt
MetisMenu accepts an options object to customize the menu behavior and structure. These options allow integration with different HTML structures and frameworks like Bootstrap.
```APIDOC
## Configuration Options
MetisMenu accepts an options object to customize the menu behavior and structure. These options allow integration with different HTML structures and frameworks like Bootstrap.
### Default Options
```javascript
const defaultOptions = {
toggle: true, // Auto collapse siblings when opening a menu
triggerElement: 'a', // CSS selector for clickable trigger elements
parentTrigger: 'li', // CSS selector for parent container of triggers
subMenu: 'ul' // CSS selector for collapsible submenu elements
};
```
### Example Usage
**Disable accordion behavior (allow multiple open menus):**
```javascript
const menu = new MetisMenu('#menu', {
toggle: false
});
```
**Bootstrap 4/5 nav structure:**
```javascript
const bootstrapMenu = new MetisMenu('#bootstrap-nav', {
triggerElement: '.nav-link',
parentTrigger: '.nav-item',
subMenu: '.nav.flex-column'
});
```
**Custom HTML structure:**
```javascript
const customMenu = new MetisMenu('#custom-menu', {
triggerElement: '.menu-trigger',
parentTrigger: '.menu-item',
subMenu: '.submenu-list',
toggle: true
});
```
```
--------------------------------
### Initialize Hoverable Vertical Menu
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-vertical-hover.html
Initialize the MetisMenu plugin on an element with the ID 'menu1'. Ensure the DOM is fully loaded before initialization.
```javascript
document.addEventListener("DOMContentLoaded", function(event) {
new MetisMenu('#menu1');
});
```
--------------------------------
### Accessibility and Styling
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Details on how to ensure accessibility with `aria-expanded` and apply styling for arrows.
```APIDOC
## Accessibility and Styling
### Accessibility (`aria-expanded`)
Ensure `aria-expanded` is set on the anchor (`a`) tag for screen readers. The plugin will toggle this attribute automatically.
```html
```
### Stopping List Opening (`aria-disabled`)
Set `aria-disabled="true"` on an `` element to prevent MetisMenu from opening its submenu.
```html
List 1
```
```
--------------------------------
### Include MetisMenuJS via unpkg CDN (UMD)
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Include the MetisMenuJS library in your HTML using a script tag pointing to the unpkg CDN for the UMD build.
```html
```
--------------------------------
### Register MetisMenu Event Listeners
Source: https://context7.com/onokumus/metismenujs/llms.txt
Use the `on()` method to attach event listeners for `show.metisMenu`, `shown.metisMenu`, `hide.metisMenu`, and `hidden.metisMenu` events. The method supports chaining.
```javascript
const menu = new MetisMenu('#menu');
// Listen for menu show event (fires immediately when show is called)
menu.on('show.metisMenu', (event) => {
console.log('Menu is opening:', event.detail.showElement);
});
// Listen for menu shown event (fires after CSS transition completes)
menu.on('shown.metisMenu', (event) => {
console.log('Menu is now visible:', event.detail.shownElement);
// Scroll into view if needed
event.detail.shownElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
});
// Listen for menu hide event (fires immediately when hide is called)
menu.on('hide.metisMenu', (event) => {
console.log('Menu is closing:', event.detail.hideElement);
});
// Listen for menu hidden event (fires after CSS transition completes)
menu.on('hidden.metisMenu', (event) => {
console.log('Menu is now hidden:', event.detail.hiddenElement);
});
```
```javascript
// Method chaining
menu
.on('show.metisMenu', handleShow)
.on('shown.metisMenu', handleShown)
.on('hide.metisMenu', handleHide)
.on('hidden.metisMenu', handleHidden);
```
```javascript
// Practical example: Track menu analytics
menu.on('shown.metisMenu', (event) => {
const menuItem = event.detail.shownElement.closest('li');
const menuLabel = menuItem.querySelector('a').textContent;
analytics.track('menu_expanded', { label: menuLabel });
});
```
--------------------------------
### Import MetisMenuJS using require (CommonJS)
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Import the MetisMenuJS library using the CommonJS require syntax. Note that only the default export is available with this method.
```javascript
const MetisMenu = require('metismenujs');
```
--------------------------------
### Include MetisMenuJS via unpkg CDN (ES6 Module)
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Include the MetisMenuJS library in your HTML using a script tag with type="module", pointing to the unpkg CDN for the ES6 module build.
```html
```
--------------------------------
### Stop and Re-start MetisMenuJS Instance
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-dispose.html
Use `dispose()` to stop the MetisMenuJS instance and `update()` to re-initialize it. Ensure the DOM is fully loaded before executing.
```javascript
document.addEventListener("DOMContentLoaded", function(event) {
const stopMm = document.querySelector("#stopMm");
const startMm = document.querySelector("#startMm");
const mm = new MetisMenu("#menu");
stopMm.addEventListener("click", function(event) {
mm.dispose();
});
startMm.addEventListener("click", function(event) {
mm.update();
});
});
```
--------------------------------
### Configure MetisMenuJS Options
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Initialize MetisMenuJS with custom options, such as disabling auto-collapse or specifying custom selectors for trigger elements, parent triggers, and submenus.
```javascript
new MetisMenu("#menu", { toggle: false });
```
```javascript
new MetisMenu("#menu", { triggerElement: '.nav-link' });
```
```javascript
new MetisMenu("#menu", { parentTrigger: '.nav-item' });
```
```javascript
new MetisMenu("#menu", { subMenu: '.nav.flex-column' });
```
--------------------------------
### Initialize MetisMenuJS with RTL Support
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-vertical.html
Initializes MetisMenuJS on an element with the ID 'menu3', enabling Right-To-Left (RTL) text direction support. This is useful for languages that read from right to left.
```javascript
document.addEventListener("DOMContentLoaded", function(event) {
new MetisMenu('#menu3');
});
```
--------------------------------
### Include MetisMenuJS via jsDelivr CDN (UMD)
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Include the MetisMenuJS library in your HTML using a script tag pointing to the jsDelivr CDN for the UMD (Universal Module Definition) build.
```html
```
--------------------------------
### MetisMenu JS Constructor
Source: https://context7.com/onokumus/metismenujs/llms.txt
Creates a new MetisMenu instance that transforms a nested unordered list into an interactive collapsible menu. The constructor accepts a CSS selector string or DOM element, along with an optional configuration object.
```APIDOC
## new MetisMenu(selector, options)
### Description
Creates a new MetisMenu instance that transforms a nested unordered list into an interactive collapsible menu. The constructor accepts a CSS selector string or DOM element, along with an optional configuration object.
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```html
```
### Response
#### Success Response (200)
None
#### Response Example
None
```
--------------------------------
### API Methods
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Methods available to programmatically control MetisMenuJS instances.
```APIDOC
## API Methods
### `dispose()`
- **Description:** Stops and destroys the MetisMenu instance.
```javascript
const mm = new MetisMenu("#menu");
mm.dispose();
```
### `update()`
- **Description:** Re-initializes the MetisMenu instance. Useful after dynamic content changes.
```javascript
const mm = new MetisMenu("#menu");
mm.dispose();
// ... perform AJAX or other dynamic updates ...
mm.update();
```
```
--------------------------------
### MetisMenuJS Event Handling
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-event.html
This snippet demonstrates how to attach event listeners to a MetisMenuJS instance to capture menu state changes. The `event.detail` object provides access to the specific DOM elements involved in the event.
```APIDOC
## MetisMenuJS Event Handling
### Description
This section explains how to use the `.on()` method to subscribe to various events emitted by MetisMenuJS. These events allow you to execute custom logic when menu items are shown or hidden.
### Method
JavaScript
### Endpoint
N/A (Client-side JavaScript)
### Parameters
N/A
### Request Example
```javascript
new MetisMenu('#menu')
.on('show.metisMenu', function(event) {
console.log(event.detail.showElement);
})
.on('shown.metisMenu', function(event) {
console.log(event.detail.shownElement);
})
.on('hide.metisMenu', function(event) {
console.log(event.detail.hideElement);
})
.on('hidden.metisMenu', function(event) {
console.log(event.detail.hiddenElement);
});
```
### Response
#### Success Response (Event Trigger)
- **event.detail.showElement** (DOM Element) - The element that is about to be shown.
- **event.detail.shownElement** (DOM Element) - The element that has just been shown.
- **event.detail.hideElement** (DOM Element) - The element that is about to be hidden.
- **event.detail.hiddenElement** (DOM Element) - The element that has just been hidden.
#### Response Example
```json
{
"event": "show.metisMenu",
"detail": {
"showElement": "
...
"
}
}
```
#### Error Handling
N/A (Client-side event handling)
```
--------------------------------
### Include MetisMenuJS via jsDelivr CDN (ES6 Module)
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Include the MetisMenuJS library in your HTML using a script tag with type="module", pointing to the jsDelivr CDN for the ES6 module build.
```html
```
--------------------------------
### Import MetisMenuJS using ES6 default export
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Import the MetisMenuJS library using the ES6 default export syntax.
```javascript
import MetisMenu from 'metismenujs';
```
--------------------------------
### MetisMenuJS API Methods
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Available methods to control MetisMenuJS instances programmatically.
```APIDOC
## API
### `dispose()`
Stops and destroys the MetisMenu instance.
```javascript
const mm = new MetisMenu("#menu");
mm.dispose();
```
### `update()`
Re-initializes the MetisMenu instance. Useful after dynamic content changes.
```javascript
const mm = new MetisMenu("#menu");
mm.dispose();
// Perform AJAX or other content updates
mm.update();
```
```
--------------------------------
### Listen to MetisMenuJS Events
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-event.html
Use the .on() method to attach event listeners for MetisMenuJS actions. The event object provides access to details about the menu element involved in the event.
```javascript
new MetisMenu('#menu')
.on('show.metisMenu', function(event) {
console.log(event.detail.showElement);
})
.on('shown.metisMenu', function(event) {
console.log(event.detail.shownElement);
})
.on('hide.metisMenu', function(event) {
console.log(event.detail.hideElement);
})
.on('hidden.metisMenu', function(event) {
console.log(event.detail.hiddenElement);
});
```
--------------------------------
### Include MetisMenuJS Stylesheet
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Include the MetisMenuJS stylesheet in your HTML. You can use either the unpkg or CDN link.
```html
```
--------------------------------
### Custom HTML Structure Configuration
Source: https://context7.com/onokumus/metismenujs/llms.txt
Adapt MetisMenu to custom HTML by providing specific CSS selectors for trigger elements, parent containers, and submenus.
```javascript
const customMenu = new MetisMenu('#custom-menu', {
triggerElement: '.menu-trigger',
parentTrigger: '.menu-item',
subMenu: '.submenu-list',
toggle: true
});
```
--------------------------------
### CSS Custom Properties for Transitions
Source: https://context7.com/onokumus/metismenujs/llms.txt
Customize MetisMenu's animation timing and duration using CSS custom properties.
```APIDOC
## CSS Custom Properties
### Description
MetisMenu uses CSS custom properties (variables) for controlling animation timing. Override these properties to customize the transition behavior.
### Method
Define or override CSS custom properties in your stylesheet.
### Endpoint
N/A (CSS Styling)
### Parameters
- **--mm-transition-timing-function** (string) - Optional - Defines the easing function for transitions (e.g., `ease-in-out`, `cubic-bezier(...)`).
- **--mm-trantisition-duration** (string) - Optional - Defines the duration of the transitions (e.g., `0.5s`, `150ms`).
### CSS Usage Examples
```css
/* Override default timing in your stylesheet */
:root {
--mm-transition-timing-function: ease-in-out;
--mm-trantisition-duration: 0.5s;
}
/* Faster transitions */
.fast-menu {
--mm-trantisition-duration: 0.15s;
}
/* Slower, more dramatic transitions */
.slow-menu {
--mm-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--mm-trantisition-duration: 0.6s;
}
/* Disable transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
:root {
--mm-trantisition-duration: 0.001s;
}
}
```
```
--------------------------------
### MetisMenuJS CSS Custom Properties
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Customizable CSS variables for styling MetisMenuJS.
```APIDOC
## CSS Custom Properties (Variables)
| Property |
|---|---|
| `--mm-transition-timing-function` | `ease` | Sets how intermediate values are calculated for CSS transition effects. |
| `--mm-transition-duration` | `0.35s` | Sets the length of time a transition animation should take to complete. |
```
--------------------------------
### Disable Accordion Behavior
Source: https://context7.com/onokumus/metismenujs/llms.txt
Instantiate MetisMenu with `toggle: false` to allow multiple submenus to be open simultaneously.
```javascript
const menu = new MetisMenu('#menu', {
toggle: false
});
```
--------------------------------
### update() Method
Source: https://context7.com/onokumus/metismenujs/llms.txt
Re-initializes the MetisMenu after the DOM has been modified, such as after loading new menu items via AJAX. This method restores the menu functionality without creating a new instance.
```APIDOC
## update()
Re-initializes the MetisMenu after the DOM has been modified, such as after loading new menu items via AJAX. This method restores the menu functionality without creating a new instance.
### Usage
```javascript
const menu = new MetisMenu('#menu');
// After adding new items via AJAX
async function loadMoreMenuItems() {
menu.dispose();
const response = await fetch('/api/menu-items');
const html = await response.text();
document.getElementById('menu').innerHTML += html;
// Re-initialize the menu
menu.update();
}
```
### Example: Dynamic menu loading
```javascript
async function refreshMenu() {
const menuElement = document.getElementById('menu');
menu.dispose();
try {
const response = await fetch('/api/navigation');
const data = await response.json();
menuElement.innerHTML = buildMenuHTML(data);
menu.update();
} catch (error) {
console.error('Failed to load menu:', error);
menu.update(); // Restore original menu functionality
}
}
```
```
--------------------------------
### Apply Animation Classes to Menu
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-animate.html
Add the `animate__animated` and a specific animation class (e.g., `animate__bounce`) to your `ul` element to apply the desired animation effect to the MetisMenu.
```html
...
```
--------------------------------
### Import MetisMenu JS in ES Modules or CommonJS
Source: https://context7.com/onokumus/metismenujs/llms.txt
Import the MetisMenu class into your project using ES Module syntax or CommonJS require. Styles can also be imported.
```javascript
// ES Module import (recommended)
import { MetisMenu } from 'metismenujs';
// Default export also available
import MetisMenu from 'metismenujs';
// CommonJS require
const MetisMenu = require('metismenujs');
// Import styles with Vite/Astro
import 'metismenujs/style';
// Or import Sass source
import 'metismenujs/sass';
```
--------------------------------
### MetisMenuJS API: Update
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Call the 'update' method to re-initialize MetisMenuJS. Useful after dynamic content changes.
```javascript
const mm = new MetisMenu("#menu");
mm.dispose();
// ajax ...
mm.update();
```
--------------------------------
### Import MetisMenuJS Styles
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Import the MetisMenuJS styles directly in your JavaScript or Sass files when using build tools like Vite or Astro.
```javascript
import 'metismenujs/style';
```
```javascript
import 'metismenujs/sass';
```
--------------------------------
### Include MetisMenuJS Plugin
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Include the MetisMenuJS plugin's JavaScript file in your HTML. You can use either the unpkg or CDN link.
```html
```
--------------------------------
### Arrow Options for Menu Items
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Add the 'has-arrow' class to 'a' elements to display arrow indicators for expandable menu items.
```html
```
--------------------------------
### MetisMenuJS API: Dispose
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Call the 'dispose' method to stop and destroy an initialized MetisMenu instance.
```javascript
const mm = new MetisMenu("#menu");
mm.dispose();
```
--------------------------------
### Initialize MetisMenuJS with Toggle Disabled
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-vertical.html
Initializes MetisMenuJS on an element with the ID 'menu2', disabling the toggle functionality. This means sub-menus will not automatically collapse when another is opened.
```javascript
document.addEventListener("DOMContentLoaded", function(event) {
new MetisMenu('#menu2', {
toggle: false
});
});
```
--------------------------------
### Include animate.css for Animations
Source: https://github.com/onokumus/metismenujs/blob/master/docs/mm-animate.html
To use animation effects with MetisMenuJS, include the animate.css stylesheet. This provides a wide range of pre-defined CSS animations.
```html
```
--------------------------------
### Configure TypeScript for CommonJS imports
Source: https://github.com/onokumus/metismenujs/blob/master/README.md
Configure your tsconfig.json to enable TypeScript typings when using CommonJS imports with require(). This provides better intellisense and autocompletion.
```json
{
"compilerOptions": {
"moduleResolution": "NodeNext"
}
}
```
--------------------------------
### Bootstrap 4/5 Navigation Structure
Source: https://context7.com/onokumus/metismenujs/llms.txt
Configure MetisMenu for Bootstrap navigation by specifying selectors for link, item, and submenu elements.
```javascript
const bootstrapMenu = new MetisMenu('#bootstrap-nav', {
triggerElement: '.nav-link',
parentTrigger: '.nav-item',
subMenu: '.nav.flex-column'
});
```
--------------------------------
### Customize Transitions with CSS Custom Properties
Source: https://context7.com/onokumus/metismenujs/llms.txt
MetisMenu uses CSS custom properties for animation timing. Override `--mm-transition-timing-function` and `--mm-trantisition-duration` to customize transition behavior.
```css
/* Override default timing in your stylesheet */
:root {
--mm-transition-timing-function: ease-in-out;
--mm-trantisition-duration: 0.5s;
}
```
```css
/* Faster transitions */
.fast-menu {
--mm-trantisition-duration: 0.15s;
}
```
```css
/* Slower, more dramatic transitions */
.slow-menu {
--mm-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
--mm-trantisition-duration: 0.6s;
}
```
```css
/* Disable transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
:root {
--mm-trantisition-duration: 0.001s;
}
}
```
--------------------------------
### Default Configuration Options
Source: https://context7.com/onokumus/metismenujs/llms.txt
These are the default options for MetisMenu. They control behavior like accordion mode, trigger elements, parent containers, and submenu selectors.
```javascript
const defaultOptions = {
toggle: true, // Auto collapse siblings when opening a menu
triggerElement: 'a', // CSS selector for clickable trigger elements
parentTrigger: 'li', // CSS selector for parent container of triggers
subMenu: 'ul' // CSS selector for collapsible submenu elements
};
```
--------------------------------
### MetisMenuJS Options: Toggle
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Configure the 'toggle' option to disable auto-collapse behavior. Defaults to true.
```javascript
new MetisMenu("#menu", {
toggle: false
});
```
--------------------------------
### Add MetisMenu Class to Unordered List
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Add the 'metismenu' class to your unordered list element to initialize MetisMenuJS.
```html
```
--------------------------------
### dispose() Method
Source: https://context7.com/onokumus/metismenujs/llms.txt
Removes all event listeners and destroys the MetisMenu instance. Use this method before removing the menu from the DOM or when you need to reinitialize with different options.
```APIDOC
## dispose()
Removes all event listeners and destroys the MetisMenu instance. Use this method before removing the menu from the DOM or when you need to reinitialize with different options.
### Usage
```javascript
const menu = new MetisMenu('#menu');
// Later, when you need to clean up
menu.dispose();
```
### Example: Cleanup before removing element
```javascript
function removeMenu() {
const menu = window.currentMenu;
if (menu) {
menu.dispose();
document.getElementById('menu').remove();
}
}
```
### Example: Reinitialize with new options
```javascript
function reinitializeMenu(newOptions) {
menu.dispose();
const newMenu = new MetisMenu('#menu', newOptions);
return newMenu;
}
```
```
--------------------------------
### MetisMenuJS Options: Trigger Element
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Set the 'triggerElement' option to specify a custom CSS selector for elements that trigger menu expansion/collapse. Useful for frameworks like Bootstrap.
```javascript
new MetisMenu("#menu", {
triggerElement: '.nav-link' // bootstrap 4
});
```
--------------------------------
### MetisMenuJS Options: Sub Menu
Source: https://github.com/onokumus/metismenujs/blob/master/docs/index.html
Specify a custom CSS selector for sub-menu elements using the 'subMenu' option. Useful for frameworks like Bootstrap.
```javascript
new MetisMenu("#menu", {
subMenu: '.nav.flex-column' // bootstrap 4
});
```
--------------------------------
### Dispose MetisMenu Instance
Source: https://context7.com/onokumus/metismenujs/llms.txt
Call the `dispose()` method to remove event listeners and clean up the MetisMenu instance. This is useful before DOM removal or reinitialization.
```javascript
const menu = new MetisMenu('#menu');
// Later, when you need to clean up
menu.dispose();
```
```javascript
function removeMenu() {
const menu = window.currentMenu;
if (menu) {
menu.dispose();
document.getElementById('menu').remove();
}
}
```
```javascript
function reinitializeMenu(newOptions) {
menu.dispose();
const newMenu = new MetisMenu('#menu', newOptions);
return newMenu;
}
```