# OverflowMenu

## Overview

Use the overflow menu component when additional options are available to the user but there is a space constraint.

<figure><img src="https://2985180403-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MhSQqKqKx7I7rVBbqF_%2Fuploads%2FrOZIum47mzV91riawPTG%2Foverflowmenu.png?alt=media&#x26;token=fe312ee7-5d11-4ea7-8197-953cf8187fa0" alt=""><figcaption></figcaption></figure>

### Widget API

The `CTextField` widget parameters are identical to the normal `TextField` widget, however, it also has some extra parameters:

{% tabs %}
{% tab title="COverflowMenu" %}

| Property           | Description                                                                                                                                                                                                                                   |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| controller         | <p>An object that is used to control the menu.</p><ul><li><strong>Type:</strong> <code>COverflowMenuController</code></li><li><strong>Default:</strong> required</li></ul>                                                                    |
| items              | <p>A list of <code>COverflowMenuItem</code> to display in a column when the menu is open.</p><ul><li><strong>Type:</strong> <code>List\<COverflowMenuItem></code></li><li><strong>Default:</strong> required</li></ul>                        |
| child              | <p>The child contained by the menu.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                |
| onOpen             | <p>A method called after the menu is open.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                  |
| onClose            | <p>A method called after the menu is closed.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                |
| barrierDismissible | <p>Whether you can close the menu by tapping the barrier.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>                                                                   |
| menuOffset         | <p>The adjustment in the position applied to the menu.</p><ul><li><strong>Type:</strong> <code>Offset</code></li><li><strong>Default:</strong> <code>Offset.zero</code></li></ul>                                                             |
| size               | <p>The size of this menu. It can be <code>regular</code>, <code>sm</code>, or <code>md</code>.</p><ul><li><strong>Type:</strong> <code>COverflowMenuSize</code></li><li><strong>Default:</strong> <code>COverflowMenuSize.md</code></li></ul> |
| {% endtab %}       |                                                                                                                                                                                                                                               |

{% tab title="COverflowMenuItem" %}

| Property     | Description                                                                                                                                                         |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| child        | <p>The content of the item.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                              |
| onTap        | <p>Called when the item is tapped.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                |
| enable       | <p>Whether the item is enabled or not.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>            |
| hasDivider   | <p>Whether this item has a divider.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>false</code></li></ul>              |
| isDelete     | <p>To make this menu item a danger ghost button.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>false</code></li></ul> |
| {% endtab %} |                                                                                                                                                                     |

{% tab title="COverflowMenuButton" %}

| Property           | Description                                                                                                                                                                                                                                   |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| icon               | <p>The icon of the button.</p><ul><li><strong>Type:</strong> <code>Widget</code></li><li><strong>Default:</strong> required</li></ul>                                                                                                         |
| items              | <p>A list of <code>COverflowMenuItem</code> to display in a column when the menu is open.</p><ul><li><strong>Type:</strong> <code>List\<COverflowMenuItem></code></li><li><strong>Default:</strong> required</li></ul>                        |
| enable             | <p>Whether the button is enabled or not.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>                                                                                    |
| barrierDismissible | <p>Whether you can close the menu by tapping the barrier.</p><ul><li><strong>Type:</strong> <code>bool</code></li><li><strong>Default:</strong> <code>true</code></li></ul>                                                                   |
| onClose            | <p>A method called after the menu is closed.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                |
| onOpen             | <p>A method called after the menu is open.</p><ul><li><strong>Type:</strong> <code>VoidCallback?</code></li><li><strong>Default:</strong> optional</li></ul>                                                                                  |
| menuOffset         | <p>The adjustment in the position applied to the menu.</p><ul><li><strong>Type:</strong> <code>Offset</code></li><li><strong>Default:</strong> <code>Offset.zero</code></li></ul>                                                             |
| size               | <p>The size of this menu. It can be <code>regular</code>, <code>sm</code>, or <code>md</code>.</p><ul><li><strong>Type:</strong> <code>COverflowMenuSize</code></li><li><strong>Default:</strong> <code>COverflowMenuSize.md</code></li></ul> |
| {% endtab %}       |                                                                                                                                                                                                                                               |
| {% endtabs %}      |                                                                                                                                                                                                                                               |

### Example

```dart
COverflowMenu(
    controller: controller,
    child: CButton(
        label: 'Menu Button',
        onTap: () {
            controller.open()
        },
    ),
    items: [
        COverflowMenuItem(
            child: CText(data:'hello'),
            onTap: (){ }
        ),
        COverflowMenuItem(
            isDelete: true,
            child: CText(data:'hello'),
            onTap: (){ }
        ),
    ],
);

// -----

COverflowMenuButton(
    icon: Icon(CIcons.add),
    items: [
        COverflowMenuItem(
            child: CText(data:'hello'),
            onTap: (){ }
        ),
        COverflowMenuItem(
            isDelete: true,
            child: CText(data:'hello'),
            onTap: (){ }
        ),
    ],
);
```