jQuery UI API - Menu Widget

Usage

Description: A themable menu with mouse and keyboard interactions for navigation.

Version Added: 1.9

Menus can be created from any valid markup as long as the elements have a strict parent/child relationship and each item has an anchor. The most commonly used element is an unordered list (<ul>):

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3-1</a></li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
      <li><a href="#">Item 3-4</a></li>
      <li><a href="#">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

If using a structure other than <ul>/<li>, use the menus option to distinguish between the two elements, for example menus: "div.menuElement".

Any menu item can be disabled by adding the ui-state-disabled class to the element.

Icons

To add icons to the menu, include the icons in the markup:

<ul id="menu">
  <li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
</ul>

The Menu will automatically add the necessary padding to items without icons.

Separators

Separator elements can be created by including unlinked menu items that are just spaces/dashes:

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li>-</li>
  <li><a href="#">Item 2</a></li>
</ul>

Keyboard Interaction

ENTER/SPACE: Invoke the focused menu item's action, which may be to open a submenu.
UP: Move focus to the previous menu item.
DOWN: Move focus to the next menu item.
RIGHT: Open the submenu, if available.
LEFT: Close the current submenu, move focus to the parent menu item. If focus is not on a submenu, then no action is taken.
ESCAPE: Close the current submenu, move focus to the parent menu item. If focus is not on a submenu, then no action is taken.

Entering a letter moves focus to the first item with a text label matching the letter. Repeating the same character cycles through matching items. Entering more characters within the same timeout matches the string entered.

Disabled items can receive keyboard focus, but do not allow any interaction.

Theming

The Menu Widget uses the jQuery UI CSS Framework to style its appearance and feel. For specific menu styling, use the following CSS class names:

ui-menu: The outer container of the menu. If the menu contains icons, this element will also have a ui-menu-icons class.
ui-menu-item: The container for individual menu items.
ui-menu-icon: Submenu icon settings via the icons option.
ui-menu-divider: Separator elements between menu items.

Dependencies

Additional Notes

This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget's specific CSS file as a starting point.

Example

A simple jQuery UI Menu.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu Widget Demo</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<style>
.ui-menu {
  width: 200px;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Item 3-1</a></li>
      <li><a href="#">Item 3-2</a></li>
      <li><a href="#">Item 3-3</a></li>
      <li><a href="#">Item 3-4</a></li>
      <li><a href="#">Item 3-5</a></li>
    </ul>
  </li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

<script>
$( "#menu" ).menu();
</script>

</body>
</html>

View Demo

❮ Example Draggable Example Tooltip ❯