---
title: dispose menu
---
<link href="css/mm-vertical.css" rel="stylesheet" type="text/css" />

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="sidebar-nav">
        {{> menu }}
      </nav>
    </div>
    <div class="col-md-9">
      <h3>Stop & Restart metisMenu</h3>
      <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right">
                <span class="fa fa-code"></span>
          </span>
        </div>
        <div class="panel-body">
          <button type="button" class="btn btn-danger btn-lg" id="stopMm">
            stop metisMenu
          </button>
          <button type="button" class="btn btn-success btn-lg" id="startMm">
            start metisMenu
          </button>

          <p>

{{#markdown}}
 ```javascript
 $(function() {

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

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

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

 });
 ```
{{/markdown}}

          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <nav class="sidebar-nav">
        {{> menu id="1"}}
      </nav>
    </div>
    <div class="col-md-9">
      <h3>Delete elements</h3>
      <div class="panel panel-default">
        <div class="panel-heading">
          Code
          <span class="pull-right">
                <span class="fa fa-code"></span>
          </span>
        </div>
        <div class="panel-body">

          <button type="button" class="btn btn-danger btn-lg" id="deleteElem">
            remove Menu 1
          </button>

          <p>

{{#markdown}}
 ```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();
 });
 ```
{{/markdown}}

          </p>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(function() {

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

    $('#stopMm').on('click', function (event) {
      $('#menu').metisMenu('dispose');
      noty({
          text: 'metisMenu stopped',
          layout: 'topRight',
          type: 'error',
          theme: 'metroui',
          progressBar: true,
          timeout: 2000
      });
    });

    $('#startMm').on('click', function (event) {
      $('#menu').metisMenu();
      noty({
          text: 'metisMenu restarted',
          layout: 'topRight',
          type: 'success',
          theme: 'metroui',
          progressBar: true,
          timeout: 2000
      });
    });

    $('#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();
      noty({
          text: 'Menu 1 removed',
          layout: 'topRight',
          type: 'information',
          theme: 'metroui',
          progressBar: true,
          timeout: 2000
      });

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

  });
</script>