Skip to main content link. Accesskey S

Menu

The menu sits as the top component of the left nav on applicable pages. it can contain sections and optional icons for menu entries.

Directionality:

Menu with Sections

All menu states

Classes

  • lotusMenu - class assigned to the wrapping div 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).
  • lotusMenuSubsection - this class is used for creating subsections in a menu (controls vertical and horizontal spacing).
  • 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.
  • 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.

lotusChunk is used on divs to create vertical space when needed.

Variations

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

Use the lotusSection and lotusSubsection classes if you want a more complex menu.

Dojo Menu Tree

For a dynamic, nested menu, you can use a dojo tree component within the menu wrapper classes.

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

You can see this on the dojo widget example page.

Examples

Sample HTML

Sample HTML - Menu with Sections

CSS (menu.css)

Theme CSS (menuTheme.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 dojo menu tree.

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

See Also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.