menuItem

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.MenuItem
component-class | org.richfaces.component.html.HtmlMenuItem
component-family | org.richfaces.DropDownMenu
renderer-type | org.richfaces.MenuItemRenderer
tag-class | org.richfaces.taglib.MenuItemTag

## Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

Example:

    ...
        <rich:dropDownMenu>
            ...
            <rich:menuItem value="Active"/>
            ...
        <rich:dropDownMenu>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlMenuItem;
    ...
    HtmlMenuItem myMenuItem = new HtmlMenuItem();
    ...

## Details of Usage

The "value" attribute defines the text representation for an item element.

There are two icon-related attributes. The "icon" attribute defines an icon. The "iconDisabled" attribute defines an icon for a disabled item. Also you can use the "icon" and "iconDisabled" facets. If the facets are defined, the corresponding "icon" and "iconDisabled" attributes are ignored and the facets content is shown as an icon. It could be used for an item check box implementation.

Here is an example:

    ...
        <f:facet name="icon">
            <h:selectBooleanCheckbox value="#{bean.property}"/>
        </f:facet>
    ...

The <rich:menuItem> "submitMode" attribute can be set to three possible parameters:

- Server (default)

Regular form submission request is used.

- Ajax

Ajax submission is used for switching.

- None

The "action" and "actionListener" item's attributes are ignored. Menu items don' fire any submits themselves. The behavior is fully defined by the components nested into items.

For example, you can put any content into an item, but, in this case, you should set the "mode" attribute as "none" .

Here is an example:

    ...
        <rich:dropDownMenu>
            ...
            <rich:menuItem submitMode="none">
                <h:outputLink value="www.jboss.org"/>
            </rich:menuItem>
            ...
        <rich:dropDownMenu>
    ...

You can use the "disabled" attribute to set the item state.

Here is an example:

    ...
        <rich:dropDownMenu>
            <rich:menuItem value="Disable" disabled="true"/>
        <rich:dropDownMenu>
    ...

## Look-and-Feel Customization

For skinnability implementation, the components use a style class redefinition method. Default style classes are mapped on skin parameters.

There are two ways to redefine the appearance of all <rich:menuItem> components at once:

- Redefine the corresponding skin parameters

- Add to your style sheets style classes used by a <rich:menuItem> component

## Skin Parameters Redefinition

Skin parameters redefinition for an item

Skin parameters | CSS properties
--- | ---
generalFamilyFont | font-family
generalSizeFont | font-size

Skin parameters redefinition for a hovered item

Skin parameters | CSS properties
--- | ---
tipBorderColor | border-color
tipBackgroundColor | background-color

Skin parameters redefinition for a disabled item

Skin parameters | CSS properties
--- | ---
tabDisabledTextColor | color

Skin parameters redefinition for a label

Skin parameters | CSS properties
--- | ---
generalTextColor | color

## Definition of Custom Style Classes

On the screenshot there are classes names that define styles for component elements.

Class names

Classes names that define an appearance of item elements

Class name | Description
--- | ---
rich-menu-item | Defines styles for a wrapper <div> element for an item
rich-menu-item-label | Defines styles for a label of an item
rich-menu-item-icon | Defines styles for the left icon of an item

Classes names that define different states

Class name | Description
--- | ---
rich-menu-item-disabled | Defines styles for a wrapper <div> element of an item
rich-menu-item-enabled | Defines styles for a wrapper <div> element of an enabled item
rich-menu-item-hover | Defines styles for a wrapper <div> element of a hover item
rich-menu-item-label-disabled | Defines styles for a label of a disabled item
rich-menu-item-icon-disabled | Defines styles for the left icon of a disabled item
rich-menu-item-label-enabled | Defines styles for a label of an enabled item
rich-menu-item-icon-enabled | Defines styles for the left icon of an enabled item
rich-menu-item-label-selected | Defines styles for a label of a selected item
rich-menu-item-icon-selected | Defines styles for the left icon of a selected item

In order to redefine styles for all <rich:menuItem> components on a page using CSS, it's enough to create classes with the same names and define necessary properties in them.

To change styles of particular <rich:menuItem> components, define your own style classes in the corresponding <rich:menuItem> attributes.

## Relevant Resources Links

Here you can see the example of <rich:menuItem> usage and sources for the given example.