> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/ui-customization/modular-ui/flyouts.md).

# Create and Manage Flyout Menus in WebViewer

Enhance user experience with Flyout Menus in WebViewer. Customize and integrate hovering menus seamlessly for organized functionalities. Learn how to create, manage, and integrate Flyout Menus effecti

## Overview

Flyout Menus in WebViewer provide a compact and versatile way to offer additional options or actions without overcrowding the interface. These hovering menus appear upon user interaction with UI elements such as buttons.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-2531501c16854f6c5de91d75dc0a315b66eacc42%2Ff2d174da779d62eea35dbd18697eaaa048a917be-862x803.gif?alt=media)

Flyout Menus can be customized and integrated seamlessly, enhancing the user experience by neatly organizing extra functionalities.

## Creating Flyout Menus

To add a Flyout Menu to your application, create instances of the `UI.Components.Flyout` class. Each instance can be tailored with custom items, icons, and onClick behaviors, including support for submenu items for deeper navigation options.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const flyout = new instance.UI.Components.Flyout({
  dataElement: 'myCustomFlyout',
  items: [{
    dataElement: 'customFlyoutItem',
    label: 'Custom Flyout Item',
    onClick: () => console.log('Custom Flyout Item Clicked'),
    icon: 'icon-save', 
    children: [{
      dataElement: 'submenuItem',
      label: 'Submenu Item',
      onClick: () => console.log('Submenu Item Clicked'),
      icon: 'icon-save'
    }]
  }],
});

// Add your flyout to the UI
instance.UI.Flyouts.addFlyouts([ flyout ])
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Components.Flyout](https://sdk.apryse.com/api/web/UI.Components.Flyout.html)

After creation, use the UI.Flyouts.addFlyouts method to integrate your Flyout Menu into the UI.

### Methods in the Flyout Class

### setItems

`setItems(items)`: Sets an array of item objects to the flyout. Each object in the array should follow the structure described for the `options.items` in the constructor. This operation replaces the existing items in the flyout.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const flyout = new instance.UI.Components.Flyout({
  dataElement: 'myCustomFlyout',
  items: [{
    dataElement: 'customFlyoutItem',
    label: 'Custom Flyout Item',
    onClick: () => console.log('Custom Flyout Item Clicked'),
    icon: 'icon-save', 
    children: [{
      dataElement: 'submenuItem',
      label: 'Submenu Item',
      onClick: () => console.log('Submenu Item Clicked'),
      icon: 'icon-save'
    }]
  }],
});

flyout.setItems([
  {
    dataElement: 'item-1',
    label: 'New Item',
    onClick: () => console.log('New Item clicked'),
    icon: 'icon-add',
    children: [
      // Sub-menu items...
    ]
  }
]);
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Components.Flyout](https://sdk.apryse.com/api/web/UI.Components.Flyout.html) [UI.Components.Flyout#setItems](https://sdk.apryse.com/api/web/UI.Components.Flyout.html#setItems)

### Example Use Case

Below is an example of creating a flyout, adding items to it, and then programmatically removing an item:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
// Create a new Flyout instance
const flyout = new instance.UI.Components.Flyout({
  dataElement: 'exampleFlyout',
  items: [
    {
      dataElement: 'item-1',
      label: 'Item 1',
      onClick: () => console.log('Item 1 clicked'),
      icon: 'icon-first'
    }
  ]
});

// Add your flyout to the UI
instance.UI.Flyouts.addFlyouts([ flyout ])

// Add more items to the flyout
flyout.setItems([
  // Destructure the existing items array
  ...flyout.items,
  // Add a new item
  {
    dataElement: 'item-2',
    label: 'Item 2',
    onClick: () => console.log('Item 2 clicked'),
    icon: 'icon-second'
  }
]);

// Remove an item from the flyout
flyout.setItems(flyout.items.filter(item => item.dataElement !== 'item-1'));
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Components.Flyout](https://sdk.apryse.com/api/web/UI.Components.Flyout.html) [UI.Components.Flyout#setItems](https://sdk.apryse.com/api/web/UI.Components.Flyout.html#setItems)

### UI Components inside Flyouts

In WebViewer version 11.3+, you can add other UI components to a flyout's item list. This is particularly useful for creating a flyout containing prebuilt items such as a Zoom menu or a Preset Button. There are some exceptions, as some components wouldn't make sense to add to a flyout, such as a Panel.

Below is an example of a flyout with other nested components:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
  const item1 = new instance.UI.Components.GroupedItems({
    dataElement: 'testGroupedItem',
    grow: 0,
    gap: 12,
    position: 'start',
    style: {},
    items: [
      new instance.UI.Components.CustomButton({
        label: 'test2',
        title: 'this is a test button2',
        onClick: () => console.log('button clicked!2'),
        img: 'icon-save',
        dataElement: 'customButton2',
      }),
      new instance.UI.Components.ToggleElementButton({
        label: 'Toggle2',
        title: 'Toggle the visibility of the element',
        img: 'icon-form-field-combobox',
        toggleElement: 'newFlyout',
      }),
    ],
    alwaysVisible: true,
  });
  const item2 = new instance.UI.Components.Flyout({
    dataElement: 'exampleFlyout',
    label: 'Flyout',
    items: [
      new instance.UI.Components.CustomButton({
        label: 'test4',
        title: 'this is a test button4',
        onClick: () => console.log('button clicked!4'),
        img: 'icon-save',
        dataElement: 'customButton4',
      }),
    ],
  });
  const item3 = new instance.UI.Components.PageControls();
  const item4 = new instance.UI.Components.PresetButton({
    buttonType: 'saveAsButton',
    dataElement: 'presetButton-save'
  });
  const item5 = new instance.UI.Components.StatefulButton({
    initialState: 'SinglePage',
    states: {
      SinglePage: {
        img: 'icon-header-page-manipulation-page-layout-single-page-line',
        onClick: (update) => {
          update('DoublePage');
        },
        title: 'Single Page',
      },
      DoublePage: {
        img: 'icon-header-page-manipulation-page-layout-double-page-line',
        onClick: (update) => {
          update('SinglePage');
        },
        title: 'Double Page',
      },
    },
    mount: () => {},
  });
  const item6 = new instance.UI.Components.ToolButton({
    label: 'Pan',
    title: 'Pan the document',
    img: 'icon-header-pan',
    toolName: 'Pan',
  });
  const item7 = new instance.UI.Components.Zoom({ dataElement: 'zoomControlComponent' });
  const newFlyout = new instance.UI.Components.Flyout({
    dataElement: 'newFlyout',
    items: [
        item1,
        item2,
        item3,
        item4,
        item5,
        item6,
        item7,
    ],
  });
  instance.UI.Flyouts.addFlyouts([newFlyout]);
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Flyout Management

The `UI.Flyouts` namespace offers a suite of methods for comprehensive Flyout Menu management, allowing for addition, removal, activation, and positioning within the UI. Following are the available methods:

### addFlyouts

Integrates your Flyout Menu into the UI.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
instance.UI.Flyouts.addFlyouts([ flyout ]); // flyout is an instance of UI.Components.Flyout
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Flyouts.addFlyouts](https://sdk.apryse.com/api/web/UI.Flyouts.html)

### removeFlyout

Removes the flyout with the specified dataElement from the UI.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
instance.UI.Flyouts.removeFlyout('customFlyout');
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Flyouts.removeFlyout](https://sdk.apryse.com/api/web/UI.Flyouts.html#.removeFlyout)

### setActiveFlyout

Displays the flyout with the specified dataElement. Set to `null` to hide the active flyout.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
instance.UI.Flyouts.setActiveFlyout('customFlyout');
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Flyouts.setActiveFlyout](https://sdk.apryse.com/api/web/UI.Flyouts.html#.setActiveFlyout)

### setFlyoutPosition

Sets the position of the active flyout.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
instance.UI.Flyouts.setFlyoutPosition({ x: 100, y: 100 });
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Flyouts.setFlyoutPosition](https://sdk.apryse.com/api/web/UI.Flyouts.html#.setFlyoutPosition)

### getFlyout

Returns the flyout with the specified dataElement as an instance of `UI.Components.Flyout`.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const flyout = instance.UI.Flyouts.getFlyout('customFlyout');
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Flyouts.getFlyout](https://sdk.apryse.com/api/web/UI.Flyouts.html#.getFlyout)

### getAllFlyouts

Returns an array of all the flyouts currently in the UI as instances of `UI.Components.Flyout`.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
const flyoutList = instance.UI.Flyouts.getAllFlyouts();
```

{% endcode %}
{% endtab %}
{% endtabs %}

[UI.Flyouts.getAllFlyouts](https://sdk.apryse.com/api/web/UI.Flyouts.html#.getAllFlyouts)

Flyout Menus are a dynamic component of WebViewer's Modular UI, offering a flexible solution to incorporate additional user actions and options neatly within the user interface.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/ui-customization/modular-ui/flyouts.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.