ADF UI - Creating dropdown or menu buttons

Creating dropdown or menu buttons using ADF is easy. A dropdown menu button is the button with a dropdown icon which will display list of menu items on clicking the button or dropdown icon. Just go through the below steps to create a menu button.

1. Add a af:commandButton or af:toolbarButton where you need to dropdown button. Now, in the 'popup' facet, drag and drop af:menu and add af:menu item(i.e., af:commandMenuItem)s to the af:menu. Sample code below:

 <af:commandToolbarButton text="Options" id="commandToolbarButton1"
                                       disabled="#{bindings.EmpDeptVO.currentRow==null}"
                                       partialTriggers="t1"
                                       actionDelivery="none">
                <f:facet name="popup">
                    <af:menu id="m1">
                      <af:commandMenuItem text="View" id="cmi1" action="view"/>
                      <af:commandMenuItem text="Edit" id="cmi2" action="edit"/>
                      <af:commandMenuItem text="Delete" id="cmi3"
                                          actionListener="#{bindings.Delete.execute}"
                                          partialTriggers="t1"/>
                    </af:menu>
                </f:facet>
 </af:commandToolbarButton>

The above code in Structure window will look like this:

2. The above code will render the menu button as shown below:

3. There are two types of menu buttons:
i. Which will display dropdown list or menu items on clicking the 'dropdown' icon. This button will have a separator (vertical line '|') between the button text and the dropdown icon. It'll look like below. This is actually the default behavior. You can specify action and actionListener for this button and on clicking the button it'll cause navigation or fire actionListener based on the specified action and actionListener respectively.

ii. Which will display drowdown list on clicking the button itself. This button won't have a separator (vertical line '|') between the button text and the dropdown icon. It'll look like below. To get this behavior, you need to set actionDelivery="none" for the button. If you set this property, you can't specify either action or actionListener for the button as it won't fire either action or actionListener.

That's it. You can specify action and actionListener for the menu items in the dropdown menu and do whatever you want.