We will take p:commandButton as the trigger. The p:slideMenu tag, representing a slide menu, has a trigger attribute that points to the ID of p:commandButton. The slide menu consists of submenus (slides) with menu items sending AJAX, non-AJAX (ajax="false"), and GET requests (url is not null). The following code shows this:

<p:commandButton id="btn" value="Show Slide Menu" type="button"/>

<p:slideMenu overlay="true" trigger="btn"
  my="left top" at="left bottom" style="width:190px;">
  <p:submenu label="CRUD Operations" icon="ui-icon-play">
    <p:menuitem value="Save"
      actionListener="#{slideMenuBean.save}"
      icon="ui-icon-disk" update="growl"/>
    <p:menuitem value="Update"
      actionListener="#{slideMenuBean.update}"
      icon="ui-icon-arrowrefresh-1-w" update="growl"/>
    <p:menuitem value="Delete"
      actionListener="#{slideMenuBean.delete}"
      icon="ui-icon-trash" update="growl"/>
  </p:submenu>
  <p:submenu label="Other Operations" icon="ui-icon-play">
    <p:menuitem value="Do something"
      actionListener="#{slideMenuBean.doSomething}"
      ajax="false" icon="ui-icon-check"/>
    <p:menuitem value="Go Home" action="/views/home"
      ajax="false" icon="ui-icon-home"/>
  </p:submenu>

  <p:submenu label="JSF Links" icon="ui-icon-extlink">
    <p:submenu label="JSF Components">
      <p:menuitem value="PrimeFaces" url="http://primefaces.org"/>
      <p:menuitem value="PrimeFaces Extensions"
        url="http://primefaces-extensions.github.io"/>
      <p:menuitem value="RichFaces" url="http://jboss.org/richfaces"/>
    </p:submenu>
    <p:menuitem value="JSF API"
      url="http://javaserverfaces.java.net/nonav/docs/2.2"/>
  </p:submenu>
</p:slideMenu>

The following screenshot shows how the slide menu looks when it is open (the left part of the screenshot) and after a click on the Other Operations menu item (the right part of the screenshot):

By default, the slideMenu component is positioned statically in the normal page flow. To position it dynamically, relative to a trigger component, we need to set overlay="true". The preceding sample attaches a slideMenu component to the button so that whenever the button is clicked, the menu will display itself in an overlay. The dynamic menu's position can be controlled by the my and at attributes. The my attribute specifies a corner of the menu to align with the trigger element, and the at attribute specifies a corner of the trigger to align with the menu element.

There is also a triggerEvent attribute. It defines an event name for the trigger that will show the dynamically positioned menu. The default value is click.

SlideMenu can also be opened manually by the client-side API. The menu's widget exposes the show() and hide() methods to show and hide, respectively, the overlay menu.

See the Statically and dynamically positioned menus recipe in this chapter to get some basic knowledge of statically and dynamically positioned menus