### Installation

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Instructions for installing MetisMenu using various package managers.

```APIDOC
## Installation

### npm
```sh
npm install metismenu
```

### yarn
```sh
yarn add metismenu
```

### bun
```sh
bun add metismenu
```

### composer
```sh
composer require onokumus/metismenu:dev-master
```

### Download
[Download the latest version](https://github.com/onokumus/metisMenu/archive/master.zip)
```

--------------------------------

### Install MetisMenu with Bun

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Use this command to install the MetisMenu package using Bun.

```sh
bun add metismenu
```

--------------------------------

### Install metisMenu with yarn

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Use this command to install metisMenu using yarn. Ensure you have yarn installed.

```bash
yarn add metismenu
```

--------------------------------

### Install metisMenu with npm

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Use this command to install metisMenu using npm. Ensure you have npm installed.

```bash
npm install--save metismenu
```

--------------------------------

### Install MetisMenu with npm

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Use this command to install the MetisMenu package using npm.

```sh
npm install metismenu
```

--------------------------------

### Install metisMenu with Composer

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Use this command to install metisMenu using Composer for PHP projects. Ensure you have Composer installed.

```bash
composer require onokumus/metismenu:dev-master
```

--------------------------------

### Stop and Start MetisMenu Instance

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-dispose.html

Use the 'dispose' method to stop a MetisMenu instance and re-initialize it to start.

```javascript
$(function() {

  $('#menu').metisMenu();

  $('#stopMm').on('click', function (event) {
    $('#menu').metisMenu('dispose');
  });

  $('#startMm').on('click', function (event) {
    $('#menu').metisMenu();
  });

});
```

--------------------------------

### Install MetisMenu with yarn

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Use yarn to add MetisMenu to your project. Yarn is another popular package manager for JavaScript.

```bash
$ yarn add metismenu
```

--------------------------------

### Load Submenu via Ajax

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-ajax.html

This example loads content for a specific menu item when clicked. It targets elements with a 'data-url' attribute, disposes of the menu, appends the new content to the clicked item's parent, and reinitializes the menu. The click event is then triggered programmatically.

```javascript
      $('#menu2').metisMenu();
    
      $('[data-url]').each(function(){
          $(this).one('click', function(event){
            event.preventDefault();
            var $this = $(this);
            var url = $this.attr('data-url');
            console.log(url);
    
            $.ajax({
              url: url,
              success: function(result) {
    
                $('#menu2').metisMenu('dispose');
                $this.parent('li').append(result);
    
                $('#menu2').metisMenu();
    
                $this.click();
              }
            });
    
          });
      });
```

--------------------------------

### Apply Animation Classes

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-animate.html

Apply animation classes from animate.css to your `ul` element to enable animations. For example, `animate__animated` and `animate__bounce`.

```html
<ul class="animate__animated animate__bounce"> ... </ul>

```

--------------------------------

### MetisMenu Initialization with Options

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Demonstrates how to initialize MetisMenu with custom configuration options for parent triggers and submenus.

```APIDOC
## MetisMenu Initialization with Options

### Description
Initialize MetisMenu with custom configuration for `parentTrigger` and `subMenu`.

### Method
JavaScript (jQuery)

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Configuration Options
- **parentTrigger** (jQuery selector) - Optional - Specifies a custom selector for parent elements that trigger menu expansion. Default is `li`.
- **subMenu** (jQuery selector) - Optional - Specifies a custom selector for submenu elements. Default is `ul`.

### Request Example
```javascript
$(function () {
  $("#metismenu").metisMenu({
    parentTrigger: '.nav-item', // Example for Bootstrap 4
    subMenu: '.nav.flex-column' // Example for Bootstrap 4
  });
});
```

### Response
N/A (Client-side JavaScript initialization)
```

--------------------------------

### Basic Usage

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Steps to include MetisMenu in your project and initialize it.

```APIDOC
## Usage

1.  **Include Stylesheet:**
    ```html
    <link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
    <!-- OR -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
    ```

2.  **Include jQuery:**
    ```html
    <script src="https://unpkg.com/jquery"></script>
    <!-- OR -->
    <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
    ```

3.  **Include MetisMenu Plugin:**
    ```html
    <script src="https://unpkg.com/metismenu"></script>
    <!-- OR -->
    <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
    ```

4.  **Using with ESM/Bundler:**
    ```javascript
    import $ from 'jquery';
    import MetisMenu from 'metismenu';
    // OR
    import { MetisMenu } from 'metismenu';

    const mm = new MetisMenu("#metismenu");
    // OR
    $("#metismenu").metisMenu();
    ```

5.  **Add ID to your list:**
    ```html
    <ul id="metismenu">
      <!-- Menu items here -->
    </ul>
    ```

6.  **Accessibility Attributes:**
    Ensure `<a>` tags have `aria-expanded` attribute. The plugin will manage its state.
    ```html
    <ul id="metismenu">
      <li class="mm-active">
        <a href="#" aria-expanded="true">Menu 1</a>
        <ul>
          <!-- Submenu items -->
        </ul>
      </li>
      <li>
        <a href="#" aria-expanded="false">Menu 2</a>
        <ul>
          <!-- Submenu items -->
        </ul>
      </li>
    </ul>
    ```

7.  **Arrow Class:**
    Add `has-arrow` class to `<a>` tags for arrow indicators.
    ```html
    <ul id="metismenu">
      <li>
        <a class="has-arrow" href="#" aria-expanded="false">Menu Item</a>
        <ul>
          <!-- Submenu items -->
        </ul>
      </li>
    </ul>
    ```

8.  **Initialize the plugin:**
    ```javascript
    $("#metismenu").metisMenu();
    ```
```

--------------------------------

### MetisMenu Initialization and Basic Usage

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

This snippet demonstrates how to include MetisMenu's CSS and JavaScript files and initialize the plugin on an unordered list.

```APIDOC
## MetisMenu Initialization and Basic Usage

### Description
This section covers the essential steps to get MetisMenu up and running, including linking the necessary files and applying the plugin to your HTML structure.

### Installation
1. Include metismenu StyleSheet:
   ```html
   <link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
   <!-- OR -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
   ```
2. Include jQuery:
   ```html
   <script src="https://unpkg.com/jquery"></script>
   <!-- OR -->
   <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
   ```
3. Include metisMenu plugin's code:
   ```html
   <script src="https://unpkg.com/metismenu"></script>
   <!-- OR -->
   <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
   ```

### HTML Structure
Add an `id` attribute to your unordered list and ensure `a` tags have `aria-expanded` attributes. Use `mm-active` class for initially open items and `has-arrow` class for arrow indicators.

```html
<ul id="metismenu">
  <li class="mm-active">
    <a href="#" aria-expanded="true">Menu 1</a>
    <ul>
      <li><a href="#">Submenu 1.1</a></li>
      <li><a href="#">Submenu 1.2</a></li>
    </ul>
  </li>
  <li>
    <a href="#" aria-expanded="false">Menu 2</a>
    <ul>
      <li><a href="#">Submenu 2.1</a></li>
    </ul>
  </li>
</ul>
```

### Initialization
Call the plugin on your target element using jQuery.

```javascript
$(document).ready(function() {
  $('#metismenu').metisMenu();
});
```

### Accessibility and Styling
- Use `aria-expanded` on `a` tags to manage accessibility states.
- Add `has-arrow` class to `a` tags for visual indicators.
- Use `mm-active` class on `li` elements to mark them as active or open by default.
```

--------------------------------

### MetisMenu Initialization and Usage

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Instructions on how to include MetisMenu in your project and initialize it.

```APIDOC
## Download

[Download the latest version](https://github.com/onokumus/metisMenu/archive/master.zip)

## Usage

1.  **Include MetisMenu Stylesheet**
    ```html
    <link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
    <!-- OR -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
    ```

2.  **Include jQuery**
    ```html
    <script src="https://unpkg.com/jquery"></script>
    <!-- OR -->
    <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
    ```

3.  **Include MetisMenu Plugin's Code**
    ```html
    <script src="https://unpkg.com/metismenu"></script>
    <!-- OR -->
    <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
    ```

4.  **Using with ESM/Bundler (Vite, Webpack, Rollup)**
    ```javascript
    import $ from 'jquery';
    import MetisMenu from 'metismenu';
    // OR
    import { MetisMenu } from 'metismenu';

    const mm = new MetisMenu("#metismenu");
    // OR
    $("#metismenu").metisMenu();
    ```

5.  **Add ID to Unordered List**
    ```html
    <ul id="metismenu">
      </ul>
    ```

6.  **Accessibility: `aria-expanded` Attribute**
    > Ensure `aria-expanded` is set on the `<a>` element to indicate the collapsible state. It should be `"false"` by default and `"true"` if the parent `li` has the `mm-active` class.
    ```html
    <ul id="metismenu">
      <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>
    ```

7.  **Arrow Options: `has-arrow` Class**
    > Add the `has-arrow` class to the `<a>` element for arrow indicators.
    ```html
    <ul id="metismenu">
      <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>
    ```

8.  **Initialize the Plugin**
    ```javascript
    $("#metismenu").metisMenu();
    ```
```

--------------------------------

### Handle MetisMenu Events

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-event.html

Initialize MetisMenu and attach event listeners for 'show.metisMenu', 'shown.metisMenu', 'hide.metisMenu', and 'hidden.metisMenu' to perform custom actions.

```javascript
$(function() {

 $('#menu').metisMenu()
 .on('show.metisMenu', function(event) {

 // do something…

 }).on('shown.metisMenu', function(event) {

 // do something…

 }).on('hide.metisMenu', function(event) {

 // do something…

 }).on('hidden.metisMenu', function(event) {

 // do something…

 });
});
```

--------------------------------

### Initialize MetisMenu with ESM/Bundler

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Import MetisMenu and jQuery, then initialize the plugin. Supports both default import and named import.

```javascript
import $ from 'jquery';
import MetisMenu from 'metismenu';
// OR
import { MetisMenu } from 'metismenu';

const mm = new MetisMenu("#metismenu");
// OR
$("#metismenu").metisMenu();
```

--------------------------------

### Initialize MetisMenu Folder View

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-folder.html

Initializes the MetisMenu plugin with the 'metisFolder' class and sets the 'toggle' option to false, preventing automatic collapsing of menu items on initialization. Ensure jQuery is included before this script.

```javascript
<script>
      $(function () {
    
        $('.metisFolder').metisMenu({
          toggle: false
        });
    
      });
    </script>
```

--------------------------------

### Configuration Options

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Details on available configuration options for MetisMenu.

```APIDOC
## Configuration Options

### `toggle`

*   **Type:** `Boolean`
*   **Default:** `true`
*   **Description:** Enables or disables auto collapse support.

    ```javascript
    $("#metismenu").metisMenu({
      toggle: false
    });
    ```

### `preventDefault`

*   **Type:** `Boolean`
*   **Default:** `true`
*   **Description:** Prevents or allows dropdowns' onclick events after expanding/collapsing. Available since version 2.7.0.

    ```javascript
     $("#menu").metisMenu({
       preventDefault: false
     });
    ```

### `triggerElement`

*   **Type:** `jQuery selector`
*   **Default:** `a`
*   **Description:** Specifies the element that triggers the menu expansion/collapse.

    ```javascript
    $("#metismenu").metisMenu({
      triggerElement: '.nav-link' // Example for Bootstrap 5
    });
    ```

### `dispose`

*   **Type:** `String`
*   **Default:** `null`
*   **Description:** Use this method to stop and destroy MetisMenu functionality.

    ```javascript
    $("#metismenu").metisMenu('dispose');
    ```

### Stopping list opening on certain elements

Set `aria-disabled="true"` on an `<a>` element to prevent MetisMenu from opening its submenu.

```html
<a href="#" aria-expanded="false" aria-disabled="true">Disabled List</a>
```
```

--------------------------------

### Include MetisMenu Stylesheet

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Link to the MetisMenu CSS file. Use either the unpkg or cdnjs CDN.

```html
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
<!-- OR -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
```

--------------------------------

### Initialize MetisMenu

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Basic initialization of the MetisMenu plugin on an element with the ID 'menu1'. Ensure the DOM is ready before calling this.

```javascript
$(function () { $('#menu1').metisMenu(); });
```

--------------------------------

### Initialize MetisMenu Plugin

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Basic initialization of the MetisMenu plugin on an element with the ID 'metismenu'.

```javascript
$"#metismenu").metisMenu();
```

--------------------------------

### Initialize MetisMenu for FAQ

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-faq.html

Initializes MetisMenu with custom options for an FAQ structure. Use this to define specific elements for triggers, parent triggers, and sub-menus, and disable automatic toggling.

```javascript
$(function() {

  $('.faq-menu').metisMenu({
    toggle: false,
    triggerElement: '.faq-link',
    parentTrigger: '.faq-item',
    subMenu: '.faq-answer'
  });

});
```

--------------------------------

### Include MetisMenu Plugin

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Add the MetisMenu JavaScript file. Select either the unpkg or CDN version.

```html
<script src="https://unpkg.com/metismenu"></script>
                              
                              <script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
                              
```

--------------------------------

### Basic MetisMenu Initialization

Source: https://context7.com/onokumus/metismenu/llms.txt

Initialize MetisMenu on an unordered list using jQuery or ES module import. Ensure jQuery is loaded before MetisMenu.

```javascript
// Initialize using jQuery plugin method
$(function() {
  $("#metismenu").metisMenu();
});
```

```javascript
// Or using ES module import
import $ from 'jquery';
import MetisMenu from 'metismenu';

const menu = new MetisMenu("#metismenu");
// OR
$("#metismenu").metisMenu();
```

--------------------------------

### Initialize MetisMenu with Auto Collapse

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-vertical.html

Initializes the MetisMenu plugin with default auto-collapse behavior. Ensure jQuery is included before this script.

```javascript
      $(function () {
    
          $('#menu1').metisMenu();
    
      });
    
```

--------------------------------

### Basic HTML Structure for MetisMenu

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

An unordered list with an ID attribute is required for MetisMenu initialization.

```html
<ul id="metismenu">

</ul>
```

--------------------------------

### Migrating to MetisMenu v3

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Instructions for migrating from MetisMenu v2 to v3, including file updates and class name changes.

```APIDOC
## Migrating to MetisMenu v3 from v2

### Description
Steps to update your project from MetisMenu version 2 to version 3.

### Migration Steps
1.  **Update Files**: Replace `metisMenu.js` and `metisMenu.css` with the latest versions from v3.
2.  **Update Class Name**: Change the active class from `active` to `mm-active` in your HTML or CSS.

### Example
Before (v2):
```html
<li class="active">
  <a href="#">Parent</a>
</li>
```

After (v3):
```html
<li class="mm-active">
  <a href="#">Parent</a>
</li>
```
```

--------------------------------

### Initialize MetisMenu with ESM/Bundler

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Import MetisMenu and jQuery when using module bundlers like Vite or Webpack. Initialize the menu using either the imported class or the jQuery plugin.

```javascript
import $ from 'jquery';
                              import MetisMenu from 'metismenu';
                              // OR
                              import { MetisMenu } from 'metismenu';
                              
                              const mm = new MetisMenu("#metismenu");
                              // OR
                              $("#metismenu").metisMenu();
                              
```

--------------------------------

### Programmatically Set Active States and Reinitialize

Source: https://context7.com/onokumus/metismenu/llms.txt

JavaScript code to initialize MetisMenu, programmatically set the active state based on the current URL by adding the `mm-active` class, and then reinitialize the menu.

```javascript
$(function() {
  $('#metismenu').metisMenu();

  // Programmatically set active state based on current URL
  var currentPath = window.location.pathname;
  $('#metismenu a[href="' + currentPath + '"]')
    .closest('li')
    .addClass('mm-active')
    .parents('li')
    .addClass('mm-active')
    .children('a')
    .attr('aria-expanded', 'true');

  // Reinitialize to apply active states
  $('#metismenu').metisMenu('dispose');
  $('#metismenu').metisMenu();
});
```

--------------------------------

### ES Module Usage with MetisMenu

Source: https://context7.com/onokumus/metismenu/llms.txt

Demonstrates how to import and use MetisMenu with modern JavaScript bundlers like Vite or Webpack using ES module syntax. Includes class-based initialization and jQuery plugin method usage.

```javascript
// Import dependencies
import $ from 'jquery';
import MetisMenu from 'metismenu';

// Import styles (if using bundler that supports CSS imports)
import 'metismenu/dist/metisMenu.css';

// Class-based initialization
const sidebarMenu = new MetisMenu('#sidebar', {
  toggle: true,
  preventDefault: true
});

// jQuery plugin method (also available after import)
$('#navbar').metisMenu({
  triggerElement: '.nav-link',
  parentTrigger: '.nav-item',
  subMenu: '.dropdown-menu'
});

// Named export also available
import { MetisMenu } from 'metismenu';

const menu = new MetisMenu('#menu', {
  toggle: false
});

// TypeScript usage with type definitions
interface MetisMenuOptions {
  toggle?: boolean;
  preventDefault?: boolean;
  triggerElement?: string;
  parentTrigger?: string;
  subMenu?: string;
}

const options: MetisMenuOptions = {
  toggle: true,
  preventDefault: true
};

$('#typedMenu').metisMenu(options);
```

--------------------------------

### Initialize MetisMenu Plugin

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Call the MetisMenu plugin on the target unordered list element using its ID.

```javascript
$("#metismenu").metisMenu();
```

--------------------------------

### Include MetisMenu Plugin

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Include the MetisMenu JavaScript file. Use either the unpkg or cdnjs CDN.

```html
<script src="https://unpkg.com/metismenu"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/metismenu"></script>
```

--------------------------------

### Include MetisMenu Stylesheet

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Link to the MetisMenu CSS file in your HTML. You can use a CDN or a local path.

```html
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
<!-- OR -->  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">
```

--------------------------------

### Include jQuery

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Include the jQuery library before MetisMenu. Use either the unpkg or cdnjs CDN.

```html
<script src="https://unpkg.com/jquery"></script>
<!-- OR -->
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
```

--------------------------------

### Include jQuery

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Include the jQuery library before MetisMenu. Choose either the unpkg or CDN version.

```html
<script src="https://unpkg.com/jquery"></script>
                              
                              <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
                              
```

--------------------------------

### Dynamic AJAX Menu Loading with MetisMenu

Source: https://context7.com/onokumus/metismenu/llms.txt

Load menu items dynamically using AJAX and ensure MetisMenu is correctly reinitialized after appending new HTML content to the DOM.

```javascript
$(function() {
  $('#menu').metisMenu();

  // Append new menu items via AJAX
  $('#loadMoreButton').one('click', function() {
    var $button = $(this);

    $.ajax({
      url: '/api/menu-items',
      success: function(result) {
        // 1. Dispose current metisMenu instance
        $('#menu').metisMenu('dispose');

        // 2. Append new HTML content
        $('#menu').append(result);

        // 3. Reinitialize metisMenu
        $('#menu').metisMenu();

        $button.attr('disabled', 'disabled').text('Loaded');
      },
      error: function(xhr, status, error) {
        console.error('Failed to load menu items:', error);
      }
    });
  });

  // Lazy-load submenu items on demand
  $('[data-url]').each(function() {
    $(this).one('click', function(event) {
      event.preventDefault();
      var $trigger = $(this);
      var url = $trigger.attr('data-url');

      $.ajax({
        url: url,
        success: function(result) {
          // Dispose, modify, reinitialize pattern
          $('#menu').metisMenu('dispose');
          $trigger.parent('li').append(result);
          $('#menu').metisMenu();

          // Trigger click to open newly loaded submenu
          $trigger.click();
        }
      });
    });
  });
});

// Expected AJAX response HTML format:
/*
<ul>
  <li><a href="/new-item-1">New Item 1</a></li>
  <li><a href="/new-item-2">New Item 2</a></li>
  <li>
    <a class="has-arrow" href="#" aria-expanded="false">New Submenu</a>
    <ul>
      <li><a href="/sub-1">Sub Item 1</a></li>
      <li><a href="/sub-2">Sub Item 2</a></li>
    </ul>
  </li>
</ul>
*/
```

--------------------------------

### Initialize MetisMenu with RTL Support

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-vertical.html

Initializes the MetisMenu plugin for right-to-left text direction. This requires setting the 'dir' attribute to 'rtl' on the body element and including jQuery.

```html
    <body dir="rtl">
    ...
    
```

```javascript
      $(function () {
    
          $('#menu3').metisMenu();
    
      });
    
```

--------------------------------

### Initialize Hoverable Vertical Menu

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-vertical-hover.html

Use this JavaScript snippet to initialize the MetisMenu plugin on a menu element. Ensure the HTML structure is correctly set up for a vertical menu.

```javascript
    <script>
    $(function() {
    
     $('#menu1').metisMenu();
    
    });
    </script>
```

--------------------------------

### Set Pre-Expanded Active State with mm-active Class

Source: https://context7.com/onokumus/metismenu/llms.txt

Utilize the `mm-active` class on list items to ensure they and their parent menu items are expanded by default on page load. This is ideal for indicating the current page or section.

```html
<ul id="metismenu">
  <li>
    <a class="has-arrow" href="#" aria-expanded="false">Dashboard</a>
    <ul>
      <li><a href="/dashboard">Overview</a></li>
    </ul>
  </li>
  <!-- This menu and its parents will be expanded on page load -->
  <li class="mm-active">
    <a class="has-arrow" href="#" aria-expanded="true">Settings</a>
    <ul>
      <li><a href="/settings/general">General</a></li>
      <!-- Nested active item - parent chain auto-expanded -->
      <li class="mm-active">
        <a class="has-arrow" href="#" aria-expanded="true">Advanced</a>
        <ul>
          <li class="mm-active">
            <a href="/settings/advanced/security">Security (Current)</a>
          </li>
          <li><a href="/settings/advanced/backup">Backup</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
```

--------------------------------

### Remove Menu Element and Re-initialize MetisMenu

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-dispose.html

Demonstrates removing a specific menu element ('#removable' within '#menu1') and then re-initializing MetisMenu. The 'dispose' method is called before removing the element to ensure proper cleanup.

```javascript
$('#menu1').metisMenu();

$('#deleteElem').one('click', function (event) {

  $(this).removeClass('btn-danger')
    .addClass('btn-success')
    .html('Menu 1 removed')
    .attr('disabled', 'disabled');

  $('#menu1').metisMenu('dispose');

  $('#menu1 #removable').remove();

  $('#menu1').metisMenu();
});
```

--------------------------------

### Handle 'shown.metisMenu' Event

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-event2.html

This snippet demonstrates how to initialize MetisMenu and attach an event listener for the 'shown.metisMenu' event. The event handler calls a Jump function, which is likely used for scrolling to a specific element on the page. Ensure MetisMenu and Jump.js are included.

```javascript
    <script>
    $(function() {
    $('#menu')
      .metisMenu()
      .on('shown.metisMenu', function(event) {
        Jump("#menu")
      });
    });
    </script>
```

--------------------------------

### Initialize MetisMenu on an Element

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Initializes MetisMenu on the element with the ID 'toc'. Ensure jQuery and MetisMenu are loaded before this script.

```javascript
$(function () { $('#toc').metisMenu(); });
```

--------------------------------

### Load Entire Menu via Ajax

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-ajax.html

Use this when you need to load the entire menu structure dynamically. It disposes of the existing menu, appends the new content, and then reinitializes MetisMenu. The button is disabled after the first click.

```javascript
    $('#menu').metisMenu();
    
    $("#ajaxButton").one('click', function() {
      var $this = $(this);
      $.ajax({
        url: "demo-ajax.html",
        success: function(result) {
    
          $('#menu').metisMenu('dispose');
          $("#menu").append(result);
    
          $('#menu').metisMenu();
          $this.attr('disabled', 'disabled');
        }
      });
    });
```

--------------------------------

### Initialize MetisMenu on Nested Structure

Source: https://context7.com/onokumus/metismenu/llms.txt

Initialize MetisMenu on a deeply nested unordered list structure to create multi-level collapsible navigation. Ensure the HTML structure is valid.

```javascript
$(function() {
  $('#sidebar').metisMenu();
});
```

--------------------------------

### Initialize MetisMenu with No Collapse

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-vertical.html

Initializes the MetisMenu plugin with the 'toggle' option set to false, disabling the auto-collapse feature. Requires jQuery.

```javascript
      $(function () {
    
          $('#menu2').metisMenu({ toggle: false });
    
      });
    
```

--------------------------------

### MetisMenu Options

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Configuration options available for customizing MetisMenu's behavior, such as toggle, dispose, preventDefault, triggerElement, parentTrigger, and subMenu.

```APIDOC
## MetisMenu Options

### Description
MetisMenu provides several options to customize its behavior. These can be passed as an object during initialization.

### Options

#### `toggle`
- **Type**: `Boolean`
- **Default**: `true`
- **Description**: Enables or disables auto-collapse behavior. If `true`, only one menu item can be expanded at a time.

```javascript
$('#metismenu').metisMenu({
  toggle: false
});
```

#### `preventDefault`
- **Type**: `Boolean`
- **Default**: `true`
- **Description**: Prevents or allows the default `onclick` events of dropdown elements after expanding/collapsing. Available since v2.7.0.

```javascript
$('#menu').metisMenu({
  preventDefault: false
});
```

#### `triggerElement`
- **Type**: `jQuery selector`
- **Default**: `a`
- **Description**: Specifies the element that triggers the menu expansion/collapse. Useful for frameworks like Bootstrap 4.

```javascript
$('#metismenu').metisMenu({
  triggerElement: '.nav-link' // Example for Bootstrap 4
});
```

#### `parentTrigger`
- **Type**: `jQuery selector`
- **Default**: `li`
- **Description**: Specifies the parent element that should be considered the trigger container. Useful for frameworks like Bootstrap 4.

```javascript
$('#metismenu').metisMenu({
  parentTrigger: '.nav-item' // Example for Bootstrap 4
});
```

#### `subMenu`
- **Type**: `jQuery selector`
- **Default**: `ul`
- **Description**: Specifies the selector for sub-menu elements. Useful for frameworks like Bootstrap 4.

```javascript
$('#metismenu').metisMenu({
  subMenu: '.nav.flex-column' // Example for Bootstrap 4
});
```

### Methods

#### `dispose`
- **Type**: `String`
- **Default**: `null`
- **Description**: Use this method to stop and destroy the MetisMenu instance.

```javascript
$('#metismenu').metisMenu('dispose');
```
```

--------------------------------

### Migrating to v3

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Key changes required when migrating from MetisMenu v2 to v3, primarily concerning CSS class names.

```APIDOC
## Migrating to v3 from v2

### Description
This section outlines the main changes needed when upgrading your MetisMenu implementation from version 2 to version 3.

### Key Changes

- **Update Files**: Ensure you are using the latest `metisMenu.js` and `metisMenu.css` files from version 3.
- **CSS Class Name**: The primary change is the renaming of the active class. The class `active` should now be replaced with `mm-active`.

**Example**: 

*   **v2**: `<li class="active">...</li>`
*   **v3**: `<li class="mm-active">...</li>`

This change affects how the plugin styles and identifies active menu items.
```

--------------------------------

### Listen to MetisMenu Events

Source: https://context7.com/onokumus/metismenu/llms.txt

Attach event listeners to respond to submenu opening and closing actions. Use these events to log state changes, trigger animations, or track user interactions.

```javascript
$(function() {
  $('#menu').metisMenu()
    .on('show.metisMenu', function(event) {
      // Fires immediately when a submenu begins opening
      var menuTitle = $(event.target).parent('li').children('a').text();
      console.log('Opening: ' + menuTitle);

      // Access the submenu element being shown
      var submenu = event.target;
      $(submenu).addClass('menu-animating');
    })
    .on('shown.metisMenu', function(event) {
      // Fires after CSS transition completes and submenu is fully visible
      var menuTitle = $(event.target).parent('li').children('a').text();
      console.log('Opened: ' + menuTitle);

      // Track analytics
      trackMenuOpen(menuTitle);
    })
    .on('hide.metisMenu', function(event) {
      // Fires immediately when a submenu begins collapsing
      var menuTitle = $(event.target).parent('li').children('a').text();
      console.log('Collapsing: ' + menuTitle);
    })
    .on('hidden.metisMenu', function(event) {
      // Fires after CSS transition completes and submenu is fully hidden
      var menuTitle = $(event.target).parent('li').children('a').text();
      console.log('Collapsed: ' + menuTitle);
    });
});
```

```javascript
// Example with notification library (Noty)
$('#menu').metisMenu()
  .on('shown.metisMenu', function(event) {
    new Noty({
      text: $(event.target).parent('li').children('a').html() + ' opened',
      layout: 'topRight',
      type: 'success',
      timeout: 350
    }).show();
  })
  .on('hidden.metisMenu', function(event) {
    new Noty({
      text: $(event.target).parent('li').children('a').html() + ' collapsed',
      layout: 'topRight',
      type: 'warning',
      timeout: 350
    }).show();
  });
```

--------------------------------

### Dispose and Reinitialize MetisMenu

Source: https://context7.com/onokumus/metismenu/llms.txt

Manage MetisMenu instances by disposing of existing ones before reinitializing, especially after dynamic content updates or structural changes.

```javascript
$(function() {
  // Initialize menu
  $('#menu').metisMenu();

  // Stop/destroy button handler
  $('#stopButton').on('click', function() {
    // Completely removes metisMenu functionality and event handlers
    $('#menu').metisMenu('dispose');
    console.log('MetisMenu stopped');
  });

  // Restart button handler
  $('#startButton').on('click', function() {
    // Reinitialize with fresh instance
    $('#menu').metisMenu();
    console.log('MetisMenu restarted');
  });

  // Remove and reinitialize after DOM modification
  $('#removeMenuItem').on('click', function() {
    // 1. Dispose current instance
    $('#menu').metisMenu('dispose');

    // 2. Modify DOM
    $('#menu #itemToRemove').remove();

    // 3. Reinitialize
    $('#menu').metisMenu();
  });
});
```

--------------------------------

### MetisMenu Configuration Options

Source: https://context7.com/onokumus/metismenu/llms.txt

Configure MetisMenu behavior using options like toggle, preventDefault, triggerElement, parentTrigger, and subMenu. Adjust these to control accordion behavior, link propagation, and element selectors.

```javascript
// Full configuration with all available options
$("#metismenu").metisMenu({
  // Auto-collapse other open menus when opening a new one (accordion behavior)
  toggle: true,        // Default: true

  // Prevent default click action on links with href="#"
  preventDefault: true, // Default: true

  // jQuery selector for the clickable trigger element
  triggerElement: 'a',  // Default: 'a'

  // jQuery selector for the parent container of triggers
  parentTrigger: 'li',  // Default: 'li'

  // jQuery selector for the submenu container
  subMenu: 'ul'         // Default: 'ul'
});
```

```javascript
// Disable auto-collapse (allow multiple menus open simultaneously)
$("#metismenu").metisMenu({
  toggle: false
});
```

```javascript
// Allow click events to propagate (useful for links with actual URLs)
$("#metismenu").metisMenu({
  preventDefault: false
});
```

```javascript
// Bootstrap 5 navigation integration
$("#navmenu").metisMenu({
  triggerElement: '.nav-link',
  parentTrigger: '.nav-item',
  subMenu: '.nav.flex-column'
});
```

--------------------------------

### Dynamically Control Menu Item Expansion

Source: https://context7.com/onokumus/metismenu/llms.txt

JavaScript code to initialize MetisMenu, dynamically enable/disable menu items by manipulating the `aria-disabled` attribute, and conditionally disable menu access based on user roles.

```javascript
$(function() {
  $('#metismenu').metisMenu();

  // Dynamically enable/disable menu items
  $('#upgradeButton').on('click', function() {
    // Remove disabled state to enable menu expansion
    $('[aria-disabled="true"]').attr('aria-disabled', 'false');
  });

  // Conditionally disable based on user permissions
  function updateMenuAccess(userRole) {
    if (userRole !== 'admin') {
      $('#adminMenu a').attr('aria-disabled', 'true');
    } else {
      $('#adminMenu a').attr('aria-disabled', 'false');
    }
  }
});
```

--------------------------------

### Include MetisMenu CSS

Source: https://context7.com/onokumus/metismenu/llms.txt

Include the MetisMenu CSS file using a CDN link in the head of your HTML document. Ensure the path is correct for your project.

```html
<!-- Required CSS include -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/metismenu/dist/metisMenu.min.css">

<!-- Or unpkg CDN -->
<link rel="stylesheet" href="https://unpkg.com/metismenu/dist/metisMenu.min.css">
```

--------------------------------

### Include Animate.css

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-animate.html

Add this line to your HTML to include the animate.css library, which provides various animation effects.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css">

```

--------------------------------

### MetisMenu Method: dispose

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Call the `dispose` method to stop and destroy the MetisMenu instance.

```javascript
$("#metismenu").metisMenu('dispose');
```

--------------------------------

### Configure Sub Menu

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Specify a custom selector for sub-menu elements, compatible with Bootstrap 5's structure.

```javascript
 $("#metismenu").metisMenu({
   subMenu: '.nav.flex-column' // bootstrap 5
 });
```

--------------------------------

### MetisMenu Method: dispose

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Call the `dispose` method to stop and destroy the MetisMenu instance, removing its functionality.

```javascript
$"#metismenu").metisMenu('dispose');
```

--------------------------------

### MetisMenu Option: toggle

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Configure the `toggle` option to disable auto-collapse behavior when opening new submenus.

```javascript
$("#metismenu").metisMenu({
               toggle: false
             });
```

--------------------------------

### Stopping List Opening

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Instructions on how to prevent MetisMenu from opening specific sub-menus by using the `aria-disabled` attribute.

```APIDOC
## Stopping List Opening on Certain Elements

### Description
MetisMenu allows you to disable the expand/collapse functionality for specific list items. This is achieved by setting the `aria-disabled` attribute to `true` on the anchor (`a`) tag within that list item.

### Usage

Set `aria-disabled="true"` in the `<a>` element as shown below. This will stop MetisMenu from opening or closing the menu for that particular list item. This attribute can be changed dynamically, and MetisMenu will respect the changes.

```html
<ul id="metismenu">
  <li>
    <a href="#" aria-expanded="false" aria-disabled="true">List 1 (Disabled)</a>
    <ul>
      <li><a href="#">Submenu 1.1</a></li>
    </ul>
  </li>
  <li>
    <a href="#" aria-expanded="false">List 2 (Enabled)</a>
    <ul>
      <li><a href="#">Submenu 2.1</a></li>
    </ul>
  </li>
</ul>
```

### Dynamic Change Example

```javascript
// To disable List 1
$('#metismenu li:first-child > a').attr('aria-disabled', 'true');

// To enable List 1 again
$('#metismenu li:first-child > a').attr('aria-disabled', 'false');
```
```

--------------------------------

### Add Arrow Indicators

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Apply the `has-arrow` class to anchor elements to display arrow indicators for submenus.

```html
<ul id="metismenu">
<li class="mm-active">
  <a class="has-arrow" href="#" aria-expanded="true">Menu 1</a>
  <ul>
  ...
  </ul>
</li>
<li>
  <a class="has-arrow" aria-expanded="false">Menu 2</a>
  <ul>
  ...
  </ul>
</li>
...
</ul>
```

--------------------------------

### MetisMenu Option: toggle

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Configure the `toggle` option to disable auto-collapse behavior. Set to `false` to keep all expanded menus open.

```javascript
$"#metismenu").metisMenu({
   toggle: false
 });
```

--------------------------------

### Add Arrow Controls

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Apply the `has-arrow` class to anchor elements to display arrow controls for collapsible menu items.

```html
<ul id="metismenu">
                              <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>
                              
```

--------------------------------

### Configure MetisMenu with parentTrigger

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Use the `parentTrigger` option to specify a custom selector for parent elements that should trigger menu expansion. This is useful for frameworks like Bootstrap 4.

```javascript
 $("#metismenu").metisMenu({
                             parentTrigger: '.nav-item' // bootstrap 4
                           });
                          
```

--------------------------------

### MetisMenu Events

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Details on the events triggered by MetisMenu during show, shown, hide, and hidden states.

```APIDOC
## MetisMenu Events

### Description
MetisMenu fires several events that you can hook into to perform actions during the lifecycle of menu expansion and collapse.

### Event Types

#### `show.metisMenu`
- **Description**: This event fires immediately when the `_show` instance method is called, before the menu starts to expand.

#### `shown.metisMenu`
- **Description**: This event is fired after a collapse `ul` element has been made visible to the user. It waits for CSS transitions to complete.

#### `hide.metisMenu`
- **Description**: This event is fired immediately when the `_hide` method has been called, before the menu starts to collapse.

#### `hidden.metisMenu`
- **Description**: This event is fired after a collapse `ul` element has been hidden from the user. It waits for CSS transitions to complete.

### Example Usage

```javascript
$('#metismenu').on('shown.metisMenu', function (event) {
  console.log('Menu item shown:', event.target);
});

$('#metismenu').on('hidden.metisMenu', function (event) {
  console.log('Menu item hidden:', event.target);
});
```
```

--------------------------------

### Configure MetisMenu with subMenu

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

The `subMenu` option allows you to define a custom selector for sub-menu elements. This is particularly helpful when integrating with CSS frameworks like Bootstrap 4.

```javascript
 $("#metismenu").metisMenu({
                             subMenu: '.nav.flex-column' // bootstrap 4
                           });
                          
```

--------------------------------

### Add 'has-arrow' Class for Arrow Controls

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Apply the `has-arrow` class to anchor elements to display default arrow controls for expandable menu items.

```html
<ul id="metismenu">
            <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>
```

--------------------------------

### MetisMenu Option: preventDefault

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Control whether dropdowns' onclick events are prevented after expanding/collapsing using the `preventDefault` option. Defaults to `true`.

```javascript
 $("#menu").metisMenu({
                              preventDefault: false
                            });
                          
```

--------------------------------

### MetisMenu Option: preventDefault

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Set `preventDefault` to `false` to allow default onclick events for dropdowns after expanding/collapsing. This option is available since version 2.7.0.

```javascript
$("#menu").metisMenu({
                     preventDefault: false
                   });
```

--------------------------------

### MetisMenu Option: preventDefault

Source: https://github.com/onokumus/metismenu/blob/master/README.md

Control whether dropdowns' onclick events are prevented after expanding/collapsing. Set to `false` to allow these events.

```javascript
$"#menu").metisMenu({
  preventDefault: false
});
```

--------------------------------

### Disable List Opening with aria-disabled

Source: https://github.com/onokumus/metismenu/blob/master/docs/mm-docs.html

Set `aria-disabled="true"` on an anchor tag to prevent MetisMenu from opening that specific list. This can be changed dynamically.

```html
<a href="#" aria-expanded="false" aria-disabled="true">List 1</a>
                          
```

--------------------------------

### Disable Menu Opening with aria-disabled

Source: https://github.com/onokumus/metismenu/blob/master/docs/index.html

Set `aria-disabled="true"` on an anchor tag to prevent MetisMenu from opening or closing its associated submenu.

```html
<a href="#" aria-expanded="false" aria-disabled="true">List 1</a>
```