The rich:panelMenu component is used to create a collapsible side-menu panel. The component has a pre-defined look and feel which can be skinned. You can customize it with styles and a set of component attributes. This example demonstrates basic use of the rich:panelMenu component.

The menu uses the parent component itemChangeListener to output the current selection. Alternatively, you could use an action and actionListener pair at each rich:panelMenuItem component to perform the navigation and process any ActionEvent events from there.

Specify the item switching mode at the rich:panelMenu level with the itemMode attribute. The attribute can be redefined on child rich:panelMenuItem components, and is used instead of the global setting.

Specify the group switching mode at the rich:panelMenu level with the groupMode attribute. The attribute can be redefined on child rich:panelMenuGroup components, and is used instead of the global setting.

The itemMode and groupMode attributes can be set to three possible values:

- server (default): A common submission of the form is performed and the page is completely refreshed.
- ajax: An Ajax form submission is performed. Additionally, elements specified in the render attribute are rendered
- client: No form submission is performed. The behavior is completely defined by the components nested in the menu items. Groups expand on the client side.