Menu Widget

A menu can be created from any valid markup as long as the elements have a strict parent/child relationship. The most commonly used element is the unordered list (<ul>). Additionally, the contents of each menu item must be wrapped with a block-level DOM element. In the example below <div> elements are used as wrappers:

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

If you use a structure other than <ul>/<li>, including using the same element for the menu and the menu items, use the menus option to specify a way to differentiate the two elements, e.g., menus: "div.menuElement".

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

Icons

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

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

Menu automatically adds the necessary padding to items without icons.

Dividers

Divider elements can be created by including menu items that contain only spaces and/or dashes:

<ul id="menu">
  <li>
    <div>Item 1</div>
  </li>
  <li>-</li>
  <li>
    <div>Item 2</div>
  </li>
</ul>

Keyboard interaction

• ENTER/SPACE: Invoke the focused menu item's action, which may be opening 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 and move focus to the parent menu item. If not in a submenu, do nothing.
• ESCAPE: Close the current submenu and move focus to the parent menu item. If not in a submenu, do nothing.

Typing a letter moves focus to the first item whose title starts with that character. Repeating the same character cycles through matching items. Typing more characters within the one second timer matches those characters.

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

• ui-menu: The outer container of the menu, as well as any nested submenu. This top-level element will additionally have a ui-menu-icons class if the menu contains icons.
  • ui-menu-item: The container for individual menu items. This contains the element for the item's text itself as well as the element for submenus.
    • ui-menu-item-wrapper: The wrapper element inside each individual menu item, containting the text content and the icon indicating submenus.
      • ui-menu-icon: The submenu icons set via the icons option.
  • ui-menu-divider: Divider elements between menu items.

Dependencies

• UI Core
• Widget Factory
• Position

• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.