RichFaces <rich:panelMenu>
This component is used in conjunction with <rich:panelMenuItem> and <rich:panelMenuGroup> to create an expanding, hierarchical menu. The <rich:panelMenu> component?s appearance can be highly customized, and the hierarchy can stretch to any number of sub-levels.
The <rich:panelMenu> component does not need any extra attributes declared for basic usage. However, it does require child <rich:panelMenuGroup> and <rich:panelMenuItem> components.
Style classes and skin parameters
The following table contains the style classes and corresponding skin parameters for the panelMenu.
| Class | Function | Skin Parameters | Mapped CSS properties |
|---|---|---|---|
| .rf-pm | It is used to define styles for the panel menu itself. | No skin parameters. | |
| .rf-pm-gr | It is used to define styles for a panel menu group. | panelBorderColor | border-top-color |
| .rf-pm-exp, .rf-pm-colps | These classes define styles for the panel menu when it is expanded or collapsed. | No skin parameters. | |
| .rf-pm-ico | It is used to define styles for the panel menu icons. | No skin parameters. | |
| .rf-pm-ico-exp, .rf-pm-ico-colps | These classes define styles for the panel menu icons when they are expanded or collapsed. | No skin parameters. | |
| .rf-pm-hdr-exp, .rf-pm-hdr-colps | These classes define styles for the panel menu headers when they are expanded or collapsed. | No skin parameters. | |
| .rf-pm-itm | It is used to define styles for a panel menu item. | panelBorderColor generalTextColor | border-top-color color |
| .rf-pm-itm-gr | It is used to define styles for a panel menu item as part of a panel menu group. | No skin parameters. | |
| .rf-pm-itm:hover | It is used to define styles for a panel menu item when the mouse hovers over it. | additionalBackgroundColor | background-color |
| .rf-pm-itm-sel | It is used to define styles for a panel menu item when it is selected. | No skin parameters. | |
| .rf-pm-itm-dis | It is used to define styles for a panel menu item when it is disabled. | tabDisabledTextColor | color |
| .rf-pm-itm-ico | It is used to define styles for the icon in a panel menu item. | No skin parameters. | |
| .rf-pm-itm-exp-ico | It is used to define styles for the icon in a panel menu item when it is expanded. | No skin parameters. | |
| .rf-pm-itm-lbl | It is used to define styles for the label in a panel menu item. | generalSizeFont generalFamilyFont | font-size font-family |
| .rf-pm-gr | It is used to define styles for a panel menu group. | panelBorderColor | border-top-color |
Example
Here, in the following example, we are implementing <rich:panelMenu> component. This example contains the following files.
JSF File
// panel-menu.xhtml
Output:
By default panel is collapsed.
We can expend panel by clicking.
