Skip to main content

MenuButton Component


MenuButton Component

The MenuButton component can be integrated with the ButtonBar component and supports the following:

  • Integrated with the existing ButtonBar component
  • Configure menu title, height, button text, menu item options, click event.

The MenuButton component consists of:

  • MenuButton.component: The Visualforce UI component.
  • MenuButtonOptions.class: The Apex class that stores the configuration options specified by the developer and used by the controller to render the component.
  • MenuButtonOptions.MenuItem.class: The Apex class that constructs the menu item options for the component.

MenuButton Component Attributes

The MenuButton component accepts the following attributes.

Attribute Type Required? Description
id String Required An identifier that allows the component to be referenced by other components in the page.


Required The configuration options for the MenuButton component.

MenuButtonOptions Class

The MenuButton component has the MenuButtonOptions class that provides the following property options.

Property Type Required? Description
buttonLabel String Optional The displayed label of the button in the component.
menuHeight String Optional The height of the menu button.
menuId String Required The Id of the menu button.
menuItemLayoutBlock Boolean Optional If set this to true, the menu item options won't be collapsible.
menuItemOnClickAction String Optional The JavaScript method which will be triggered when click each of the menu items.               
menuItems List
Required The menu item options displayed in the menu button component.
menuItemSectionTitle String Optional The title of all the menu item options.
menuLabel String Optional The displayed label of the menu button.
menuName String Optional The API name of the menu button.

Integration Sample Code

To use the MenuButton component:

  1. Put the ButtonBar component on your Visualforce page inside an <apex:form> tag as shown in the Visualforce Page Example below.
  2. Set up the component options in your controller as shown in the Apex Controller Example below.

Visualforce Page Example:

<apex:page controller="SampleController">
   <zqu:ButtonBar options="{!options}" dir="h" />

Apex Controller Example:

public class SampleController {
   public zqu.ButtonBarOptions options {get;set;}
   public SampleController ()
      options = new zqu.ButtonBarOptions();
      zqu.MenuButtonOptions menuButtonOption1 = new zqu.MenuButtonOptions();
      menuButtonOption1.menuId = '1';
      menuButtonOption1.menuName = 'add_product';
      menuButtonOption1.menuLabel = 'Add Product';
      menuButtonOption1.buttonLabel = 'Select';
      menuButtonOption1.menuItemSectionTitle = 'Select a step to begin';
      menuButtonOption1.menuItems = new List<zqu.MenuButtonOptions.MenuItem>();
      zqu.MenuButtonOptions.MenuItem item1 = new zqu.MenuButtonOptions.MenuItem(); = 'id1'; = 'name1';
      item1.label = 'Add Base Products';
      item1.bullet = 'Step 1';
      zqu.MenuButtonOptions.MenuItem item2 = new zqu.MenuButtonOptions.MenuItem(); = 'id2'; = 'name2';
      item2.label = 'Add Addon Products';
      item2.bullet = 'Step 2';
      options.buttonItems = new List<zqu.ButtonBarOptions.ButtonBarItem>();
      zqu.ButtonBarOptions.ButtonBarItem buttonBarItem1 = new zqu.ButtonBarOptions.ButtonBarItem('but1id', menuButtonOption1);