6.10.6. <rich:panelMenu> available since 3.1.0

### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.10.6. <rich:panelMenu> available since 3.1.0

expand all

#### 6.10.6.1. Description

The <rich:panelMenu> component defines vertical menu on a page. Used together with <rich:panelMenuItem> and <rich:panelMenuGroup>, which form <rich:panelMenu> content.

Figure 6.84. <rich:panelMenu> component

#### 6.10.6.2. Key Features

- Supports any number of sublevels implemented with <rich:panelMenuGroup>

- Has three submission modes: ajax, server and none

- Can be disabled

- Supports predefined and custom icons

- Has customizable look and feel

#### 6.10.6.3. Details of Usage

Use "event" attribute to define an event for appearance of collapsing/expanding sublevels. Default value is `onclick`:

    <rich:panelMenu event="onmouseover">

          ...

    </rich:panelMenu>

Switching mode could be chosen with the "mode" attribute for all panelMenu items except ones where this attribute was redefined. By default all items send traditional request. The "expandMode" attribute defines the submission modes for all collapsing/expanding panelMenu groups except ones where this attribute was redefined. The "mode" and "expandMode" attributes could be used with three possible parameters. The "mode" attribute defines parameters for all included <rich:panelMenuItem> elements.

- `Server` (default) the common submission of the form is performed and page is completely refreshed:

    ...

    <rich:panelMenu mode="server">

            <rich:panelMenuGroup label="test Group" action="#{bean.action}">

                    <rich:panelMenuItem label="test" action="#{capitalsBean.action}">

                        <f:param value="test value" name="test"/>

                    </rich:panelMenuItem>

            </rich:panelMenuGroup>

    </rich:panelMenu>

    ...

- `Ajax` an Ajax form submission is performed, and additionally specified elements in the "reRender" attribute are reRendered:

    ...

    <rich:panelMenu mode="ajax">

            <rich:panelMenuGroup label="test Group" action="#{bean.action}">

                    <rich:panelMenuItem label="test" reRender="test" action="#{capitalsBean.action}">

                            <f:param value="test value" name="test"/>

                    </rich:panelMenuItem>

            </rich:panelMenuGroup>

    </rich:panelMenu>

    ...

- `None` "Action" and "ActionListener" item's attributes are ignored. Items don't fire any submits itself. Behavior is fully defined by the components nested into items:

    ...

    <rich:panelMenu event="onclick" submitMode="none">

            <rich:panelMenuItem label="Link to external page">

                    <h:outputLink ... >

            <rich:panelMenuItem>

    </rich:panelMenu>

    ...

## Note:

As the <rich:panelMenu> component doesn't provide its own form, use it between <h:form> and </h:form> tags.

The "expandSingle" attribute is defined for expanding more than one submenu on the same level. The default value is "false" . If it's true the previously opened group on the top level closes before opening another one. See the picture below.

Figure 6.85. Using the "expandSingle" attribute

The "selectedChild" attribute is used for defining the name of the selected group or item. An example for group is placed below:

Here is an example:

    ...

    <rich:panelMenu selectedChild="thisChild">

            <rich:panelMenuGroup label="Group1" name="thisChild">

                    <!--Nested panelMenu components-->

            </rich:panelMenuGroup>

    </rich:panelMenu>

    ...

The "label" attribute is a generic attribute. The "label" attribute provides an association between a component, and the message that the component (indirectly) produced. This attribute defines the parameters of localized error and informational messages that occur as a result of conversion, validation, or other application actions during the request processing lifecycle. With the help of this attribute you can replace the last parameter substitution token shown in the messages. For example, {1} for `"DoubleRangeValidator.MAXIMUM"`, {2} for `"ShortConverter.SHORT"`.

#### 6.10.6.4. Reference Data

Table of <rich:panelMenu> attributes.

Table 6.120. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.PanelMenu
component-class | org.richfaces.component.html.HtmlPanelMenu
component-family | org.richfaces.PanelMenu
renderer-type | org.richfaces.PanelMenuRenderer
tag-class | org.richfaces.taglib.PanelMenuTag

Table 6.121. JavaScript API

Function | Description
--- | ---
expand() | Expands group element
collapse() | Collapses group element

Table 6.122. Style classes (selectors) and mapped skin parameters

Class name | Description | Skin parameter | CSS property
--- | --- | --- | ---
.rich-pmenu-disabled-element | Defines styles for panel menu disabled element | tabDisabledTextColor | color
.rich-pmenu-group | Defines styles for panel menu group | generalTextColor | color
headerFamilyFont | font-family
headerSizeFont | font-size
headerWeightFont | font-weight
tableBorderColor | border-top-color
.rich-pmenu-hovered-element | Defines styles for panel menu hevered element | additionalBackgroundColor | background-color
.rich-pmenu-item | Defines styles for panel menu item | generalTextColor | color
generalFamilyFont | font-family
genealSizeFont | font-size
generalWeightFont | font-weight
tableBorderColor | border-top-color
.rich-pmenu-top-group | Defines styles for a top group element of a component | generalFamilyFont | font-family
headerSizeFont | font-size
headerTextColor | color
headerWeightFont | font-weight
headerBackgroundColor | background-color
.rich-pmenu-top-group-div | Defines styles for a top group div element of a component | panelBorderColor | border-color

Table 6.123. Internal style classes (selectors)

Class name (selector) | Description
--- | ---
.rich-pmenu | Defines styles for panel menu
.rich-pmenu-disabled-element | Defines styles for panel menu disabled element
.rich-pmenu-group | Defines styles for panel menu group
.rich-pmenu-group-self-label | Defines styles for panel menu group label
.rich-pmenu-item | Defines styles for panel menu item
.rich-pmenu-nowrap | Defines styles for panel menu wrapper
.rich-pmenu-selected-element | Defines styles for panel menu selected element
.rich-pmenu-top-group | Defines styles for panel menu top group element
.rich-pmenu-top-group-div | Defines styles for panel menu top group div element

You can find all necessary information about style classes redefinition in Definition of Custom Style Classes section.

#### 6.10.6.5. Relevant Resources Links

Visit panelMenu page at RichFaces LiveDemo for examples of component usage and their sources.

If you have any questions or ideas regarding the <rich:panelMenu> tell about them at the RichFaces Users Forum.

- Prev6.10.5. <rich:panelBarItem> ...
- Top of page
- Front page
- Next6.10.7. <rich:panelMenuGroup> avail...