A Collapsible jQuery Menu jQuery Plugin For Bootstrap

metisMenu is a simple jQuery menu plugin for Bootstrap 4 or 3 that helps you create a collapsible menu with accordion animated effects and auto-collapse support.

3 level accordion menu bootstrap, bootstrap accordion menu with submenu, jquery accordion menu with submenu, jquery vertical accordion menu

How to make use of it:


# Yarn
$ yarn add metismenu

$ npm install metismenu --save

1. Include the Bootstrap 4 or 3 framework in your internet web page.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script> 

2. Include Font Awesome for the control buttons.

<link href="font-awesome.css" rel="stylesheet">

3. Create an accordion menu using nested lists.

<ul id="menu">
  <li class="active">
    <a href="#" class="has-arrow" aria-expanded="true">Menu 0</a>
      <li><a href="#">item 0.1</a></li>
      <li><a href="#">item 0.2</a></li>
      <li><a href="#">item 0.3</a></li>
    <a href="#" class="has-arrow" aria-expanded="false">Menu 1</a>
      <li><a href="#">item 1.1</a></li>
      <li><a href="#">item 1.2</a></li>
        <a href="#" class="has-arrow" aria-expanded="false">Menu 1.3</a>
          <li><a href="#">item 1.3.1</a></li>
          <li><a href="#">item 1.3.2</a></li>
          <li><a href="#">item 1.3.3</a></li>
      <li><a href="#">item 1.4</a></li>
        <a href="#" class="has-arrow" aria-expanded="false">Menu 1.5</a>
          <li><a href="#">item 1.5.1</a></li>
          <li><a href="#">item 1.5.2</a></li>
          <li><a href="#">item 1.5.3</a></li>
    <a href="#" class="has-arrow" aria-expanded="false">Menu 2</a>
      <li><a href="#">item 2.1</a></li>
      <li><a href="#">item 2.2</a></li>
      <li><a href="#">item 2.3</a></li>

4. Include the jQuery library and the jQuery metisMenu plugin’s information on the web page.

<link rel="stylesheet" href="/dist/metisMenu.min.css">
<script src="jquery.min.js"></script>
<script src="/dist/jquery.metisMenu.js"></script> 

5. Call the plugin and executed it.

$(function () {

6. All default settings to customize the menu.


  // enabled/disable the auto collapse.
  toggle: true,

  // prevent default event
  preventDefault: true,

  // default classes
  activeClass: 'active',
  collapseClass: 'collapse',
  collapseInClass: 'in',
  collapsingClass: 'collapsing',

  // .nav-link for Bootstrap 4
  triggerElement: 'a',

  // .nav-item for Bootstrap 4
  parentTrigger: 'li',

  // .nav.flex-column for Bootstrap 4
  subMenu: 'ul'



Event TypeDescription
show.metisMenuThis event fires immediately when the _show instance method is called.
shown.metisMenuThis event is fired when a collapse ul element has been made visible to the user (will wait for CSS transitions to complete).
hide.metisMenuThis event is fired immediately when the _hide method has been called.
hidden.metisMenuThis event is fired when a collapse ul element has been hidden from the user (will wait for CSS transitions to complete).

jQuery Accordion Menu Plugin For Bootstrap, metismenu Plugin/Github, simple jquery accordion menu, metismenu cdn, jquery vertical menu expand collapse

See Demo And Download

Official Website(onokumus): Click Here

This superior jQuery/javascript plugin is developed by onokumus. For extra Advanced Usage, please go to the official website.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Leave a Reply

Your email address will not be published. Required fields are marked *