metisMenu

https://onokumus.github.io/metismenu/
Admin
metisMenu is a collapsible jQuery menu plugin that provides expandable and collapsible navigation...
Tokens:4,542
Snippets:70
Trust Score:9.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install MetisMenu with Bun

Source: https://onokumus.github.io/metismenu/mm-docs.html

Install MetisMenu using Bun for project dependency management.

```bash
$ bun add metismenu
```

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

### Install MetisMenu with npm

Source: https://onokumus.github.io/metismenu/index.html

Use npm to install the MetisMenu package. This is a common method for managing project dependencies.

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

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

### Install MetisMenu with Composer

Source: https://onokumus.github.io/metismenu/index.html

Install MetisMenu using Composer, a dependency manager for PHP. This is useful if your project integrates with PHP.

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

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

### Install MetisMenu with Yarn

Source: https://onokumus.github.io/metismenu/index.html

Use Yarn to add MetisMenu to your project dependencies. Yarn is an alternative package manager to npm.

```bash
yarn add metismenu
```

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

### Stop and Re-start MetisMenu Instance

Source: https://onokumus.github.io/metismenu/mm-dispose.html

Use the 'dispose' method to stop a MetisMenu instance. Re-initialize the menu to start it again. Ensure the DOM is ready before executing.

```javascript
$(function() {

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

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

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

});
```

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

### Handle 'shown.metisMenu' Event

Source: https://onokumus.github.io/metismenu/mm-event2.html

Use this snippet to attach a listener for the 'shown.metisMenu' event. This event fires after a menu item is expanded. Ensure jQuery and MetisMenu are included before this script. The example scrolls to the menu after an item is shown.

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

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

### Initialize MetisMenu with ESM/Bundler

Source: https://onokumus.github.io/metismenu/mm-docs.html

Import MetisMenu and jQuery (if needed) and initialize the plugin using modern JavaScript module bundlers like Vite or Webpack.

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

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

### Initialize MetisMenu with Custom Selectors

Source: https://onokumus.github.io/metismenu/mm-faq.html

Initialize MetisMenu on FAQ elements using custom selectors for toggle, trigger, parent trigger, and submenus. Ensure the DOM is ready before initialization.

```javascript
$(function() {

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

});


```

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

### Load Menu Items with Ajax

Source: https://onokumus.github.io/metismenu/mm-ajax.html

Initializes MetisMenu and then uses an Ajax call to load menu items from 'demo-ajax.html'. After loading, it disposes of the old menu, appends the new content, and 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 Folder View with MetisMenu

Source: https://onokumus.github.io/metismenu/mm-folder.html

Use this JavaScript snippet to initialize the MetisMenu plugin for a folder view. The `toggle: false` option prevents automatic opening of the first item on load.

```javascript
<script>
  $(function () {

    $('.metisFolder').metisMenu({
      toggle: false
    });

  });
</script>
```

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

### Initialize MetisMenu with RTL Support

Source: https://onokumus.github.io/metismenu/mm-vertical.html

Apply MetisMenu to a vertical menu within an RTL-enabled body. Ensure the `dir="rtl"` attribute is set on the `<body>` tag.

```html
<body dir="rtl">
...
<script>
  $(function () {

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

  });
</script>

```

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

### Initialize MetisMenu with Auto Collapse

Source: https://onokumus.github.io/metismenu/mm-vertical.html

Use this snippet to initialize MetisMenu with default auto-collapse behavior for vertical menus.

```html
<script>
  $(function () {

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

  });
</script>

```

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

### Remove Element and Dispose MetisMenu Instance

Source: https://onokumus.github.io/metismenu/mm-dispose.html

This snippet demonstrates removing a specific menu item and then disposing of the MetisMenu instance. It also shows re-initializing the menu after element removal. Use 'one' for click events to ensure it only runs once.

```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();
});
```

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

### Include Animate.css

Source: https://onokumus.github.io/metismenu/mm-animate.html

Link the Animate.css stylesheet to enable animation effects.

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

```

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

### Include MetisMenu Stylesheet

Source: https://onokumus.github.io/metismenu/mm-docs.html

Include the MetisMenu stylesheet in your HTML to apply the menu's styling. Use either the unpkg or npm CDN link.

```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">
```

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

### Load Submenu Items with Ajax

Source: https://onokumus.github.io/metismenu/mm-ajax.html

Initializes MetisMenu for '#menu2' and then iterates through elements with a 'data-url' attribute. On click, it prevents the default action, fetches content via Ajax using the 'data-url', disposes of the current menu, appends the loaded content to the parent list item, and reinitializes MetisMenu.

```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();
        }
      });

    });
});
```

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

### Initialize MetisMenu with No Collapse

Source: https://onokumus.github.io/metismenu/mm-vertical.html

Configure MetisMenu to prevent automatic collapsing of menu items by setting `toggle` to `false`.

```html
<script>
  $(function () {

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

  });
</script>

```

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

### Include MetisMenu Plugin

Source: https://onokumus.github.io/metismenu/mm-docs.html

Include the MetisMenu plugin's JavaScript file in your HTML. Use either the unpkg or npm CDN link.

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

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

### Include jQuery

Source: https://onokumus.github.io/metismenu/mm-docs.html

Include the jQuery library before MetisMenu if you are not using a bundler. Use either the unpkg or npm CDN link.

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

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

### Include MetisMenu Stylesheet

Source: https://onokumus.github.io/metismenu/index.html

Link the MetisMenu CSS file in your HTML to apply the plugin's styling. 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">
```

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

### Initialize Hoverable Vertical Menu

Source: https://onokumus.github.io/metismenu/mm-vertical-hover.html

Use this JavaScript snippet to initialize the MetisMenu plugin on an element with the ID 'menu1'. Ensure the DOM is ready before calling the function.

```javascript
<script>
$(function() {

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

});
</script>
```

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

### Initialize MetisMenu

Source: https://onokumus.github.io/metismenu/index.html

Call the metisMenu() jQuery plugin on your target unordered list to initialize the collapsible menu functionality.

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

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

### Handle MetisMenu Events

Source: https://onokumus.github.io/metismenu/mm-event.html

Attach event listeners to the MetisMenu instance to perform actions during show, shown, hide, and hidden states. Ensure the DOM is ready before initializing.

```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…

 });
});

```

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

### Include MetisMenu Plugin

Source: https://onokumus.github.io/metismenu/index.html

Add the MetisMenu JavaScript file to your project. Ensure it's included after jQuery.

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

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

### MetisMenu Method: dispose

Source: https://onokumus.github.io/metismenu/index.html

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

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

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

### MetisMenu Option: toggle

Source: https://onokumus.github.io/metismenu/index.html

Set the `toggle` option to `false` to disable the auto-collapse behavior, allowing multiple submenus to be open simultaneously.

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

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

### Apply Animation Classes to UL Element

Source: https://onokumus.github.io/metismenu/mm-animate.html

Add 'animate__animated' and 'animate__bounce' classes to the UL element to apply a bounce animation.

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

```

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

### Include jQuery

Source: https://onokumus.github.io/metismenu/index.html

Include the jQuery library before MetisMenu. jQuery is a dependency for this plugin. You can use a CDN or a local file.

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

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

### MetisMenu Option: triggerElement

Source: https://onokumus.github.io/metismenu/index.html

Configure the `triggerElement` option with a jQuery selector to specify which elements should act as triggers for expanding/collapsing submenus. Useful for frameworks like Bootstrap.

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

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

### Add Arrow Class for Expand/Collapse Controls

Source: https://onokumus.github.io/metismenu/mm-docs.html

Apply the `has-arrow` class to anchor elements within your menu to display expand/collapse arrows.

```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 Submenu Selector

Source: https://onokumus.github.io/metismenu/mm-docs.html

Specify a custom selector for submenu elements, useful for frameworks like Bootstrap 4.

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

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

### Add Arrow Indicators

Source: https://onokumus.github.io/metismenu/index.html

Apply the `has-arrow` class to anchor (`<a>`) elements to display an arrow indicator, commonly used for indicating expandable 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" href="#" aria-expanded="false">Menu 2</a>
             <ul>
             ...
             </ul>
            </li>
            ...
            </ul>
```

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

### Accessible Expand/Collapse Controls

Source: https://onokumus.github.io/metismenu/index.html

Use the `aria-expanded` attribute on anchor tags within your menu for accessibility. The plugin automatically manages this attribute.

```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>
```

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

### MetisMenu Option: preventDefault

Source: https://onokumus.github.io/metismenu/index.html

Set `preventDefault` to `false` to allow the default click event behavior for dropdowns after expanding/collapsing. This option is available since version 2.7.0.

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

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

### Disable Menu Opening with aria-disabled

Source: https://onokumus.github.io/metismenu/index.html

Set `aria-disabled="true"` on an anchor (`<a>`) element to prevent MetisMenu from expanding or collapsing its submenu. This can be controlled dynamically.

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

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

### Accessible Expand/Collapse Controls with aria-expanded

Source: https://onokumus.github.io/metismenu/mm-docs.html

Ensure accessibility by adding the `aria-expanded` attribute to your menu links. The plugin automatically toggles this attribute based on the collapsible element's state.

```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>
```

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

### MetisMenu Option: parentTrigger

Source: https://onokumus.github.io/metismenu/index.html

Use the `parentTrigger` option to define a jQuery selector for parent elements that should trigger submenu expansion/collapse. This is helpful for custom structures like Bootstrap's nav components.

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

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

### MetisMenu Option: subMenu

Source: https://onokumus.github.io/metismenu/index.html

Specify a jQuery selector for the `subMenu` option to target the elements that contain submenu items. This allows customization for different menu structures, such as Bootstrap's flex-column navs.

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

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

### Add ID to Unordered List

Source: https://onokumus.github.io/metismenu/index.html

Assign an ID attribute to your `<ul>` element that will be transformed into a MetisMenu. This ID is used to target the menu with JavaScript.

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

</ul>
```

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

### Add ID to Unordered List for MetisMenu

Source: https://onokumus.github.io/metismenu/mm-docs.html

Assign an ID attribute to your unordered list element to target it with MetisMenu.

```html
<ul id="metismenu">
                      
                      </ul>
```
Tokens:
Raw