DOCSEARCHbyAlgolia
Submit Docs

metismenu

repository·master·Indexed 24 days ago

https://github.com/onokumus/metismenu

A collapsible jQuery plugin for creating accordion-style navigation menus. Version 3.1.1 supports accessibility features via aria-attributes, modern bundlers (Vite, Webpack, Rollup), and provides a set of configuration options and lifecycle events such as show.metisMenu and hide.metisMenu to manage menu transitions.

Tokens
1.7K
Snippets
4
Records
15
Agent score
83%

What's inside metismenu

  1. Quickstart guide for metismenu

    master

    To use metismenu in a standard web project, follow these steps:

    1. Include the StyleSheet: Add the metisMenu CSS via CDN.
    2. Include jQuery: metismenu is a jQuery plugin and requires jQuery to be loaded.
    3. Include metisMenu: Add the plugin's JavaScript via CDN.
    4. Prepare HTML: Add an id attribute to your unordered list (<ul>).
    5. Initialize: Call the plugin on your target element using jQuery.

    Accessibility and Arrows

    • Accessibility: Add aria-expanded="true" or aria-expanded="false" to the <a> element to define the current state for screen readers. The plugin will toggle this automatically.
    • Arrows: Add the has-arrow class to the <a> element to display arrow icons.

  2. Migrate from metismenu v2 to v3

    master

    When upgrading from version 2 to version 3, perform the following steps:

    1. Update your metisMenu.js and metisMenu.css files to the new versions.
    2. Replace all instances of the active class with the mm-active class.

  3. Prevent specific elements from opening the menu

    master

    To stop metisMenu from opening a sub-list when a specific element is clicked, add aria-disabled="true" to the <a> element. This can be toggled dynamically.

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

  4. Install metismenu

    master

    You can install metismenu using various package managers depending on your environment.

    # npm
npm install metismenu

# yarn
yarn add metismenu

# bun
bun add metismenu

# composer
composer require onokumus/metismenu:dev-master

  5. Configure metismenu options

    master
    Pass an options object to the .metisMenu() method to customize behavior. Note that some options are specific to integration with frameworks like Bootstrap 5.

  6. Use metismenu with ESM/Bundlers (Vite, Webpack, Rollup)

    master

    If you are using a modern bundler, you can import metismenu as a module. You can use either the MetisMenu class constructor or the jQuery plugin syntax.

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

// Option 1: Using the constructor
const mm = new MetisMenu("#metismenu");

// Option 2: Using the jQuery plugin
$("#metismenu").metisMenu();

  7. Configure MetisMenu options

    master

    When initializing MetisMenu, you can provide a configuration object to override the default settings.

    OptionDefaultDescription
    toggletrueIf true, opening one menu item will automatically close other sibling menu items.
    preventDefaulttrueIf true, prevents the default action of the trigger element if its href is #.
    triggerElement'a'The selector for the element that triggers the menu toggle (e.g., the link inside an <li>).
    parentTrigger'li'The selector for the parent container that holds the sub-menu.
    subMenu'ul'The selector for the sub-menu element itself.
    onTransitionStartundefinedA callback function executed when a transition starts.
    onTransitionEndundefinedA callback function executed when a transition ends.
    $('#your-menu-id').metisMenu({
    toggle: true,
    preventDefault: true,
    triggerElement: 'a',
    parentTrigger: 'li',
    subMenu: 'ul',
});

  8. metismenu Events

    master
    The plugin emits several events that you can listen to using jQuery's .on() method. These events allow you to react to menu state changes, including waiting for CSS transitions to complete.

  9. Dispose of a MetisMenu instance

    master

    To prevent memory leaks and remove event listeners, use the dispose() method. This removes the MetisMenu data from the element, unbinds the click.metisMenu.data-api events from trigger elements, and clears the instance configuration.

    const $menu = $('#your-menu-id');
const instance = $menu.data('metisMenu');
if (instance) {
    instance.dispose();
}

  11. Listen to metisMenu events

    master

    metisMenu emits several events that you can listen to using jQuery's .on() method. The available event names are:

    • show.metisMenu: Fired when the menu is about to be shown.
    • shown.metisMenu: Fired when the menu has been shown.
    • hide.metisMenu: Fired when the menu is about to be hidden.
    • hidden.metisMenu: Fired when the menu has been hidden.

  12. Initialize MetisMenu via jQuery

    master

    You can initialize MetisMenu on a DOM element using the jQuery plugin interface. This will attach the MetisMenu instance to the element's data. You can pass a configuration object to customize behavior.

    // Initialize with default settings
$('#your-menu-id').metisMenu();

// Initialize with custom configuration
$('#your-menu-id').metisMenu({
    toggle: false,
    triggerElement: 'span'
});