dijit/DropDownMenu

Authors: Bill Keese
jsDoc:http://dojotoolkit.org/api/dijit.DropDownMenu

Introduction

The DropDownMenu widget is a vertical menu (contrast with the horizontal dijit.MenuBar) that is used for:

  • drop down menu from dijit/form/ComboButton, dijit/form/DropDownButton, and dijit/MenuBar widgets, typically appearing below the parent widget
  • child menu spawned from another DropDownMenu (a.k.a, a nested menu), appearing to the left or right of the parent DropDownMenu
  • independent and always visible menu, typically a left-hand-side navigation menu

Items In a DropDownMenu

dijit/MenuItem widgets are the actual items in the menu.

dijit/CheckedMenuItem widgets are like dijit/MenuItem widgets, but can be clicked to change between a checked and unchecked state.

dijit/RadioMenuItem widgets are for when you want a group of menu choices, only one of which is selected at a time.

The dijit/PopupMenuItem is like a dijit/MenuItem, but when clicked displays a submenu or other widget to the right or left. A dijit/PopupMenuItem always has two child nodes: a tag with the displayed label (usually in a SPAN tag), and a widget to be popped up, typically another dijit/DropDownMenu widget.

dijit/MenuSeparator widgets render as horizontal lines between other DropDownMenu items.

Examples

Accessibility

Keyboard

Action Key
Navigate menu items Up and down arrow keys
Activate a menu item Spacebar or enter
Open a submenu Spacebar, enter, or right arrow
Close a context menu or submenu Esc or left arrow
Close a context menu and all open submenus Tab

Implementation Notes

CSS Classes

There are separate CSS classes for indicating that a MenuItem is mouse hovered (dijitMenuItemHover), and to indicate which MenuItem is selected/active (dijitMenuItemSelected). In tundra/nihilo/soria they look exactly the same, although that could be customized by a user, including removing the hover effect altogether.

"Selected/active" is in the sense of the selected tab, and is controlled by the mouse or keyboard. Implementation-wise, it means that either the MenuItem has focus, or focus is on a submenu of that MenuItem.

The Menu/MenuBar domNode has a dijitMenuPassive/dijitMenuActive class so that CSS rules for hover can be customized based on whether or not the menu has focus. Once the menu gets focus the dijitMenuHover effect is disabled in favor of the dijitMenuSelected effect, so that the dijitMenuHover effect won't linger on "File" if user moved the mouse over "File" but then used the keyboard arrows to move to the "Edit" MenuBarItem. (This is a setting in tundra/nihilo/soria and can be changed if desired.)