# Interface: MenuOverlay

## UI. MenuOverlay

A class which contains MenuOverlay APIs.
⚠ If you want to remove an item in a MenuOverlay, use disableElements.

### Methods

#### add(items [, dataElement])

  Add an array of Actions Buttons after the item that has the given data element.

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `items` | Array.<object> |  | Same as ActionButton
  `dataElement` | string | <optional> | An optional string. If not given, items will be added in the beginning

  ##### Returns:

  The instance itself
  Type
    this

  ##### Example

      WebViewer(...)
        .then(function(instance) {
          instance.UI.settingsMenuOverlay.add({
            type: 'actionButton',
            className:"row",
            img: 'icon-header-print-line',
            onClick: () => {
              alert('Printing...');
            },
            dataElement: 'alertButton',
            label:'print button'
          });
        });

#### getItems()

  Return the array of items in the menuOverlay dropdown.

  ##### Returns:

  Current items in the menuOverlay dropdown.
  Type
    Array.<object>

  ##### Example

      WebViewer(...)
        .then(function(instance) {
          instance.UI.settingsMenuOverlay.getItems();
        });

#### update( [items])

  Update all the items in the menuOverlay dropdown. To update an individual item, use updateElement

  ##### Parameters:

  Name | Type | Argument | Description
  --- | --- | --- | ---
  `items` | Array.<object> | <optional> | the items that will be rendered in the menuOverlay dropdown

  ##### Returns:

  The instance itself
  Type
    this

  ##### Example

      WebViewer(...)
        .then(function(instance) {
          // replace existing items with a new array of items
          instance.UI.settingsMenuOverlay.update([
            {
              type: 'actionButton',
              className:"row",
              img: 'icon-header-print-line',
              onClick: () => {
                alert('Hello world!');
              },
              dataElement: 'alertButton',
              label:'test button',
              role:"option"
            },
            {
              type: 'actionButton',
              className:"row",
              img: 'icon-header-print-line',
              onClick: () => {
                alert('Hello world!');
              },
              dataElement: 'alertButton2',
              label:'test button 2',
              role:"option"
            },
          ]);
        });

#### Search results