The <rich:dropDownMenu> component only requires the label attribute for basic usage. Use the label attribute to define the text label that appears as the title of the menu. Clicking on the title drops the menu down.

Alternatively, use the label facet to define the menu title. If the label facet is used, the label attribute is not necessary.

Use the jointPoint and direction attributes to determine the direction and location of the menu when it appears. The jointPoint and direction attributes both use the following settings:

By default, the menu drops down when the title is clicked. To drop down with a different event, use the showEvent attribute to define the event instead.

Menus can be navigated using the keyboard. Additionally, menus can be navigated programmatically using the JavaScript API. The JavaScript API allows the following methods:

Use the mode attribute to determine how the menu requests are submitted:

Use the direction attribute to determine the direction of the menu when it appears. The direction attribute uses the following settings:

By default, the menu is activated when the contextmenu event is observed (ie. a right-click). To activate on a different event, use the showEvent attribute to define the event instead.

Menus can be navigated using the keyboard. Additionally, menus can be navigated programmatically using the JavaScript API. The JavaScript API allows the following methods:

Use the mode attribute to determine how the menu requests are submitted:

To avoid creating many menus in iterable components that perform the same actions but only differ in content you can create one menu and reuse it with substituting its text content.

<rich:contextMenu id="menu" attached="false">

    <rich:menuItem action="#{bean.edit}">{Edit}</rich:menuItem>

    <rich:menuItem action="#{bean.delete}">{Delete}</rich:menuItem>

</rich:contextMenu>

The text will be replaced by calling the show event with corresponding parameters:

menu.show(event, { replace:
    { Edit: "Change Photo #{photo.name}", Delete: "Remove Photo #{photo.name}"}
});

It can be achieved by using <rich:componentControl> with parameters:

<rich:componentControl event="click" target="menu" operation="show">

    <a4j:param noEscape="true" value="event" />

    <rich:hashParam name="replace">

        <f:param name="Edit" value="Change Photo #{photo.name}" />

        <f:param name="Delete" value="Remove Photo #{photo.name}" />

    </rich:hashParam>

</rich:componentControl>

The <rich:menuItem> component represents a single item in a menu control. The <rich:menuItem> component can be also be used as a seperate component without a parent menu component, such as on a toolbar.

The <rich:menuGroup> component represents an expandable sub-menu in a menu control. The <rich:menuGroup> component can contain a number of <rich:menuItem> components, or further nested <rich:menuGroup> components.

The <rich:menuSeparator> component represents a separating divider in a menu control.

The activeItem attribute is used to point to the name of the currently selected menu item.

By default, the event to expand the menu is a mouse click. Set the expandEvent attribute to specify a different event to expand menus. Multiple levels of sub-menus can be expanded in one action. Set expandSingle="true" to only expand one sub-menu at a time.

Similarly, the default event to collapse the menu is a mouse click. Set the collapseEvent attribute to specify a different event to collapse menus.

As with other control components, set disabled="true" to disable the <rich:panelMenu> comonent. Child menu components can be disabled in the same way.

Icons for the panel menu can be chosen from a set of standard icons. Icons can be set for the top panel menu, child panel menus, and child item. There are three different menu states that the icon represents, as well as icons for both the left and right side of the item title.

The itemMode attribute defines the submission mode for normal menu items that link to content, and the groupMode attribute defines the submission mode for menu items that expand and collapse. The settings for these attributes apply to the entire menu unless a menu item defines its own individual itemMode or groupMode. The possible values for itemMode and groupMode are as follows:

The <rich:panelMenu> component can be controlled through the JavaScript API. The JavaScript API provides the following functions:

The <rich:panelMenuGroup> component defines a group of <rich:panelMenuItem> components inside a <rich:panelMenu>.

The <rich:panelMenuItem> component represents a single item inside a <rich:panelMenuGroup> component, which is in turn part of a <rich:panelMenu> component.

The <rich:toolbar> component does not require any attributes to be defined for basic usage. Add child components to the <rich:toolbar> component to have them appear on the toolbar when rendered.

Set the width and height of the toolbar using the common width and height attributes.

Items on the toolbar can be separated by a graphical item separator. Use the itemSeparator attribute to specify one of the standard separator styles:

Alternatively, use the itemSeparator attribute to specify a URL to an image. The image is then used as an item separator. The appearance of the item separator can be additionally customized by using the itemSeparator facet.

The <rich:toolbarGroup> component is a child component of the <rich:toolbar> component. The <rich:toolbarGroup> component is used to group a number of items together on a toolbar.