How to disable a jQuery UI menu?

Last Updated : 23 Jul, 2025

In this article we will disable a jQuery UI menu

Syntax:

$(".selector").menu( "disable" );

Learn more about selectors and menu options in jQuery.

Approach:

First, add jQuery UI scripts needed for your project.

<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Example 1:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
              rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.10.2.js">
      </script>
        <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js">
      </script>

        <style>
            .ui-menu {
                width: 200px;
            }
        </style>

        <script>
            $(function () {
                $("#gfg").menu();
                $("#gfg").menu("disable");
            });
        </script>
    </head>

    <body>
        <h1>jQuery UI | disable menu</h1>
        <ul id="gfg">
            <li><a href="https://www.geeksforgeeks.org/">1st</a>
          </li>
            <li><a href="https://www.geeksforgeeks.org/">2nd</a>
          </li>
            <li><a href="https://www.geeksforgeeks.org/">3rd</a>
          </li>
            <li><a href="https://www.geeksforgeeks.org/">2nd</a>
          </li>
            <li><a href="https://www.geeksforgeeks.org/">5th</a>
          </li>
        </ul>
    </body>
</html>