Action Menu

Menu with Icons

Classes:

• lotusActionMenu - this class is assigned to the ul tag
• lotusPlain - this class is assigned as an additional class to the ul tag when you want a menu without icons.
• lotusMenuSeparator - this class is assigned to any menu item (li tag) that you want to appear below a separator. (The li tag uses a top border style).

Basic Implementation

The popup menu is a positionable unordered list that contains a unique id which is used to access it.

To hide the menu initially, set it's display to none. This makes it invisible to both sighted and screen reader users.

Variations

To create a plain menu, with no icons, assign the lotusPlain class in addition to the lotusActionMenu class.

To create a separator above a menu item, assign the lotusMenuSeparator class to the li tag of that item.

Accessibility

Put a role="menu and aria-label attributes on the lotusActionMenu ul element. Also give it a unique id. The aria-label should be the text (or alternate text in the case of an icon) of the element that triggers the menu. In this sample code, a "More actions" link triggered the menu.

Put role="menuitem" on each menu item link element.

If the popup menu is not a DOM child of the triggering element, the triggering element should have an aria-owns property whose value is the id of the popup menu.

See the ARIA Menu Button design pattern in the WAI-ARIA 1.0 Authoring Practices guide for more information on how to make a menu that is popped up from another element accessible. If using this component as a context menu, (which pops up on right-click or is triggered by Shift F10), see the Popup Menu design pattern instead.

Examples

• from more actions and more sorts links

Sample HTML

Sample HTML - Menu with Icons

CSS (actionMenu.css)

Theme CSS (actionMenuTheme.css)

This component began as a popup menu for an action link or button. It was originally positioned by mouse click, but now is positioned directly under the element that triggers it.

We also added styles to dojo.css to make the dojo menu look this way and devs can use the dojo menu in place of this simple html one.

Most recently, we have created a plain version of the menu, without icons. This has not been ported to dojo at this point in time.

Menu icons began as background images on menu items, but have been moved to foreground images, to cut down on the amount of CSS required.

6/2/09: Updated styles to handle high contrast. To see an example of a menu that indicates a selected item in high contrast mode, click on "more sorts" on the interactive page.

2/9/11: Removed the styling to automatically hide the component using top:-9999px. This wasn't hiding the component for screen reader users.

February 15, 2012: updated accessibility section.