rich:menuGroup

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.MenuGroup
component-class | org.richfaces.component.html.HtmlMenuGroup
component-family | org.richfaces.DropDownMenu
renderer-type | org.richfaces.MenuGroupRenderer
tag-class | org.richfaces.taglib.MenuGroupTag

## Creating the Component with a Page Tag

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

Example:

    ...
        <rich:dropDownMenu value="Active">
            ...
            <rich:menuGroup value="Active">
                <!--Nested menu components-->
            </rich:menuGroup>
            ...
        </rich:dropDownMenu >
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlMenuGroup;
    ...
    HtmlMenuGroup myMenuGroup = new HtmlMenuGroup();
    ...

## Details of Usage

The "value" attribute defines the text representation of a group element in the page.

The "icon" attribute defines an icon for the component. The "iconDisabled" attribute defines an icon for when the group is disabled. 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' contents are used as icons. This 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 "iconFolder" and "iconFolderDisabled" attributes are defined for using icons as folder icons. The "iconFolder" and "iconFolderDisabled" facets use their contents as folder icon representations in place of the attribute values.

The "direction" attribute is used to define which way to display the menu as shown in the example below:

Possible values are:

- "left - down" - a submenu is attached to the left side of the menu and is dropping down

- "left - up" - a submenu is attached to the left side of the menu and is dropping up

- "right - down" - a submenu is attached to the right side of the menu and is dropping down

- "right - up" - a submenu is attached to the right side of the menu and is dropping up

- "auto - smart" positioning activation

By default, the "direction" attribute is set to "auto".

Here is an example:

    ...
            <rich:menuGroup value="Save As..." direction="left-down">
                    <rich:menuItem   submitMode="ajax" value="Text File"  action="#{ddmenu.doSaveText}"/>
                    <rich:menuItem   submitMode="ajax" value="PDF File"  action="#{ddmenu.doSavePDF}"/>
            </rich:menuGroup>
    ...

This would be the result:

Using the "direction" attribute

Note:

The <rich:menuGroup> component was designed to be used only for pop-up menu list creation.

## Facets

Facets

Facet | Description
--- | ---
icon | Redefines the icon for the enabled item state. Related attribute is "icon"
iconFolder | Redefines the folder icon for the enabled item state. Related attribute is "iconFolder"

## 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:menuGroup> components at once:

- Redefine the corresponding skin parameters

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

## Skin Parameters Redefinition

Skin parameters redefinition for a group

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

Skin parameters redefinition for a disabled group

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.

Classes names

Classes names that define an appearance of group elements

Class name | Description
--- | ---
rich-menu-group | Defines styles for a wrapper <div> element for a group
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
rich-menu-item-folder | Defines styles for the right icon of an item

Classes names that define different states

Class name | Description
--- | ---
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-folder-disabled | Defines styles for the right icon of a disabled item
rich-menu-group-hover | Defines styles for a wrapper <div> element of a hover group
rich-menu-item-icon-enabled | Defines styles for the left icon of an enabled item
rich-menu-item-icon-selected | Defines styles for the left icon of a selected item

In order to redefine styles for all <rich:menuGroup> components on a page using CSS, it's enough to create classes with the same names (possible classes could be found in the tables above) and define necessary properties in them.

Example:

    ...
    .rich-menu-item-label-disabled{
            font-style: italic;
    }
    ...

This is a result:

Redefinition styles with predefined classes

In the example a disabled label font style was changed.

Also it's possible to change styles of particular <rich:menuGroup> component. In this case you should create own style classes and use them in corresponding <rich:menuGroup> styleClass attributes. An example is placed below:

Example:

    ...
    .myClass{
        background-color: #acbece;
        border: none;
    }
    ...

The "selectClass" attribute for <rich:menuGroup> is defined as it's shown in the example below:

Example:

    <rich:menuGroup value="Save As..." selectClass="myClass">

This is a result:

Redefinition styles with own classes and styleClass attributes

As it could be seen on the picture above, the background color for selected class was changed. Also selected class has no border.

## Relevant Resources Links

On the component LiveDemo page you can see the example of <rich:menuGroup> usage and sources for the given example.