A panel menu is rendered by the p:panelMenu tag. Top-level submenus define accordion-like tabs. A click on such a tab expands or collapses the subordinated content. The menu structure is similar to every PrimeFaces' menu component—it consists of submenus and menu items. Menu items can call actions, action listeners, or trigger navigations. The following code shows this:

<p:panelMenu style="width:200px">
  <p:submenu label="Ajax Operations">
    <p:menuitem value="Save"
      actionListener="#{panelMenuBean.save}"
      icon="ui-icon-disk"/>
    <p:menuitem value="Update"
      actionListener="#{panelMenuBean.update}"
      icon="ui-icon-arrowrefresh-1-w"/>
  </p:submenu>
  <p:submenu label="Non-Ajax Operations">
    <p:menuitem value="Delete"
      actionListener="#{panelMenuBean.delete}"
      ajax="false" icon="ui-icon-close"/>
  </p:submenu>
  <p:separator/>
  <p:submenu label="Navigations">
    <p:submenu label="Links" icon="ui-icon-extlink">
      <p:submenu label="Prime Products">
        <p:menuitem value="Prime UI" icon="ui-icon-home"
          url="http://primefaces.org/primeui"/>
        <p:menuitem value="Prime Mobile" icon="ui-icon-signal"
          url="http://primefaces.org/showcase/mobile/index.xhtml"/>
      </p:submenu>
      <p:submenu label="Prime Resources">
        <p:menuitem value="Docs" icon="ui-icon-document"
          url="http://primefaces.org/documentation.html"/>
        <p:menuitem value="Download" icon="ui-icon-arrowthick-1-s"
          url="http://primefaces.org/downloads.html"/>
      </p:submenu>
    </p:submenu>
  </p:submenu>
</p:panelMenu>

The result of the preceding code listing is shown in the following screenshot. This screenshot demonstrates the same menu in two states—completely collapsed on the left-hand side and completely expanded on the right-hand side.

We see that direct children of p:panelMenu are normally several p:submenu tags with labels describing the accordion-like tabs. Tabs can be styled by the .ui-panelmenu h3 selector. In this recipe, we will use the following definition:

.ui-panelmenu h3 {
  font-size: 1em;
}

As the menu uses menu items, it is easy to invoke actions or action listeners with or without AJAX (ajax="false") as well as navigate. Navigation means that a GET request causes a switch to another page. This is always a full page refresh and only works when the url attribute on p:menuitem is set. In this case, the menu item is rendered as a normal HTML link element. If the url attribute is missing, only POST requests (with AJAX or without) can be sent.

The panelMenu component keeps the open or closed state of submenus across web pages. The state is saved in cookies. This means that when the user enters the same page again, panelMenu will be displayed in the same state as when he/she had last interacted with it. This feature is pretty useful, but sometimes, it is not desirable, for example, when multiple users with different accounts work on the same PC. In this case, we can either call the widget method clearState() (a client-side solution) or clear the cookie on logging out in the response (a server-side solution). The cookie name is panelMenu-<id>, where <id> is the client ID of p:panelMenu.