Menu

Menu with Sections

All Menu States

Dijit Menu Tree

You need to use this component if you want a menu that has a multi-level structure.

Classes

• lotusMenu - class assigned to the wrapping nav element for the component
• lotusBottomCorner - this class is an inner class for more styling options.
• lotusInner - this class is an inner class for more styling options.
• lotusMenuSection - this class is used when you want to separate your menu into sections (a divider appears after the section).
• lotusMenuHeader - class assigned to the wrapping header/div for a menu heading
• lotusHeaderSelected - the class used to indicate that a menu header is selected.
• lotusArrow, lotusTwistyOpenMenu, lotusTwistyClosedMenu - the classes assigned to the expand/collapse twisty arrows for menu sections (that are found in menu headings.
• lotusMenuSubsection - this class is used for creating subsections in a menu (controls vertical and horizontal spacing). It is placed after the lotusMenuHeader div to contain the items associated with that heading.
• lotusIcons - this is assigned to the ul tag of the menu if it uses icons
• lotusSelected - the class used to indicate that a menu item is selected.
• lotusPrimarySelect - an additional class along with lotusSelected to indicate the primary selection in a multi-tiered menu.
• lotusChunk - this is a class used to chunk data in the menu (vertical spacing).

Basic Implementation

The menu is created with 3 divs to allow for more styling options. The top level div is an HTML5 nav element.

lotusChunk is used on divs to create vertical space when needed, but shouldn't usually be necessary when using lotusMenuSection and lotusMenuSubsection properly. In the samples on this page it is being used to include the "New section" link, which isn't a menu item.

Variations

Put the lotusIcons class on the ul tag of the menu (or menu section) if you want the menu items to have icons.

Use the lotusSection and lotusSubsection classes if you want a more complex menu. (See code samples.)

Add lotusPrimarySelect to a selection option if you need to indicate a primary selection (your menu would also include a regular, secondary selection).

Dijit Menu Tree

For a dynamic, nested menu, you need to use a dijit tree component within the menu wrapper classes. The regular menu is meant for single-level sectioning.

1. Create a dijit tree within the normal .lotusMenu .lotusBottomCorner .lotusInner container.
2. Add the .lotusTree class to the root dijit tree domNode.
3. To show a node as selected, add the .lotusSelected class to its row node.
4. Set the pixel indent param for the tree to 10px (tree._nodePixelIndent = 10).

Accessibility

The menu follows the Site Navigation design pattern and can be flat, and marked up as a tool bar, or multi-leveled, and marked up as a tree.

Put role="navigation" and aria-label="[Menu navigation]" on the outermost lotusMenu element, where [Menu navigation] is an accurate description of this navigation area and is consistent across your product.

A simple menu, with no expandble menu items, is marked up as an ARIA Tool Bar. This is because an ARIA Menu does not, at this time, allow for a selected state. Put role="toolbar" on the ul tag and role="presentation" on the li tags. Put role="button" and aria-pressed="true|false" on each menu item on the link tag.

A more complex menu is markeup up as an ARIA Tree View, or you can use a Dijit menu tree, which already contains the correct ARIA markup and behavior.

To mark up your own complex menu, put role="tree" on the lotusInner div. (It can't be on the same node as the navigation role.)

Each link for a twisty arrow should have role="button" and aria-expanded set to true or false.

Each header text link should have role="treeitem," aria-expanded set to true or false, and if the menu item is selected, put aria-selected="true".

For an expanded section, put role="group" on the lotusMenuSubsection element. Put role="treeitem" on each navigational link in that section.

Add role="presentation" to the ul and header elements that don't have roles (they will be inherited by any of their child elements that don't have roles). Please see the code samples.

Examples

• Simple Menu
• Complex Menu

Sample HTML

Sample HTML - Menu with Sections

Sample HTML - All Menu States

Sample HTML - Dijit Menu Tree

CSS (menu.css)

Theme CSS (menuTheme.css)

Dijit Menu Tree CSS (dojo.css)

We have removed the background images for faster loading (top and bottom rounded corners), but the structure still remains to future-proof it and allow customers additional retheming options.

The icons have been removed from our samples, and the bottom section wrapped in a lotusSubsection div for proper alignment. See the deprecated section for a menu with icons. We have left the classes in place to allow for this, though it is not recommended.

May 2010: added optional links around section header text in h3 tags. Added a section header to the second subsection in the menu with sections example.

June 3 2010: added support for a dijit menu tree.

June 23 2010: added example of a menu with icons.

September 2010: accessibility fixes surrounding the menu header including a new lotusMenuHeader div, moving the twisty and action/help icons out of the h3 heading tag, and styling using the lotusHeading class rather than the specific h3 tags. Added lotusHeaderSelected class for selected headers, reserving lotusSelected class for individual selected menu items. Also removed lotusSprite additional class from the lotusArrow link.

October 20 2010: changed the dijit menu example from a programatically-created tree to a markup tree.

February 2011: added accessibility documentation and fixed ARIA markup.

September 2011: added new 3.0 visuals to the tree, which uses the orange selection indicators. Removed default cursor from the selected menu item and included it in the tab order in the simple menu example (to make it consistent with menu headers).

February 22, 2012: Updated the accessibility section to include the site navigation ARIA design patterns.

March 5, 2012: Added a primary selection indicator for more complex menus (which have primary and secondary selections).

March 6, 2012: moved role="tree" to the lotusInner div so there are not duplicate roles on lotusMenu (which retains role="navigation").

June 27, 2012: Updated color contrast of the twisties to be accessible (small text 4.5:1 equivalent). Also, made selection dot color accessible and got rid of orange selection twisties.