# jQuery UI API - Menu Widget
## Category
(#)
## Usage
**Description:** A themeable menu with mouse and keyboard interaction for navigation.
**Added in version:** 1.9
Menus can be created with any valid markup, as long as the elements have strict parent/child relationships and each item has an anchor. The most common elements are unordered lists (`
`):
If using a non-``/`- ` structure, use the same element for both the menu and menu items, and use the [`menus`](#) option to differentiate the two elements, e.g., `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 icon in the markup:
The Menu widget automatically adds the necessary padding for items without icons.
### Separators
Separator elements can be created by including an unlinked menu item that is only a space/dash:
### Keyboard Interaction
* ENTER/SPACE: Invoke the action of the focused menu item, which may open a submenu.
* UP: Move focus to the previous menu item.
* DOWN: Move focus to the next menu item.
* RIGHT: Open a submenu if available.
* LEFT: Close the current submenu and move focus to the parent menu item. If focus is not on a submenu, do nothing.
* ESCAPE: Close the current submenu and move focus to the parent menu item. If focus is not on a submenu, do nothing.
Type a letter to move focus to the first item starting with that letter. Typing the same character repeatedly cycles through matching items. Typing more characters within a time limit matches the entered string.
Disabled items can receive keyboard focus, but no interaction is allowed.
### Theming
The Menu widget uses the (#) to style its appearance and feel. If you need to use menu-specific styles, you can 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 a single menu item.
* `ui-menu-icon`: The submenu icon set via the [`icons`](#) option.
* `ui-menu-divider`: The separator element between menu items.
### Dependencies
### Additional Notes
* This widget requires some functional CSS, otherwise it will not work. If you are creating a custom theme, use the widget-specific CSS file as a starting point.
## Example
A simple jQuery UI Menu.
Menu Widget Demo .ui-menu { width: 200px; } $( "#menu" ).menu();
(#)
YouTip