# Action Menu

An action menu merges an action button with a menu for easy access to more actions.

## Example

```python
from deephaven import ui


my_action_menu_basic = ui.action_menu("Cut", "Copy", "Paste")
```

## UI recommendations

Consider using an [`action_group`] to group multiple action buttons together.

## Events

The `on_action` property is triggered whenever the value in the action group selection changes.

```python
from deephaven import ui


@ui.component
def ui_action_menu_on_change_example():
    selected_action, set_selected_action = ui.use_state("")
    return [
        ui.action_menu(
            "Cut",
            "Copy",
            "Paste",
            on_action=set_selected_action,
        ),
        ui.text(f"The action you have selected is: {selected_action}"),
    ]


my_action_menu_on_change_example = ui_action_menu_on_change_example()
```

## Sections

The action menu supports sections that group options. Sections can be used by wrapping groups of items in a `ui.section` element. Each section takes a `title` and `key` prop.

```python
from deephaven import ui


my_action_menu_section_example = ui.action_menu(
    ui.section(ui.item("Write"), ui.item("Append"), title="Addition"),
    ui.section(ui.item("Erase"), ui.item("Remove"), title="Deletion"),
)
```

## Complex items

Items within an action menu include additional content to better convey options. You can add icons, avatars, and descriptions to the children of an `ui.item`. When adding a description, set the `slot` prop to “description” to differentiate between the text elements.

```python
from deephaven import ui


my_action_menu_complex_items_example = ui.action_menu(
    ui.item(
        ui.icon("github_alt"),
        ui.text("Github"),
        ui.text("Github Option", slot="description"),
        text_value="Github",
    ),
    ui.item(
        ui.icon("azure_devops"),
        ui.text("Azure"),
        ui.text("Azure Option", slot="description"),
        text_value="Azure",
    ),
)
```

## Quiet State

The `is_quiet` prop makes an action menu “quiet”. This can be useful when the action menu and its corresponding styling should not distract users from surrounding content.

```python
from deephaven import ui


my_action_menu_basic = ui.action_menu("Cut", "Copy", "Paste", is_quiet=True)
```

## Disabled State

Through the ‘ is_disabled ‘ prop, an action menu can be disabled to prevent user interaction. This is useful when the action menu is currently unavailable, but the button should still be visible.

```python
from deephaven import ui


my_action_menu_basic = ui.action_menu("Cut", "Copy", "Paste", is_disabled=True)
```

## Flip

By default, the action menu automatically flips direction when space is limited. To disable this behavior, set the `should_flip` prop to `false`.

```python
from deephaven import ui


@ui.component
def ui_action_menu_flip_examples():
    return [
        ui.action_menu(
            "Cut", "Copy", "Paste", align="start", direction="top", should_flip=True
        ),
        ui.action_menu(
            "Cut", "Copy", "Paste", align="start", direction="top", should_flip=False
        ),
    ]


my_action_menu_flip_examples = ui_action_menu_flip_examples()
```

## Align and direction

The `align` prop positions the action menu relative to the trigger, while the `direction` prop determines the direction in which the action menu will render.

```python
from deephaven import ui


@ui.component
def ui_action_menu_align_direction_examples():
    return [
        ui.action_menu("Cut", "Copy", "Paste", align="start"),
        ui.action_menu(
            "Cut", "Copy", "Paste", align="start", direction="top", should_flip=False
        ),
        ui.action_menu(
            "Cut",
            "Copy",
            "Paste",
            align="start",
            direction="start",
        ),
        ui.action_menu(
            "Cut",
            "Copy",
            "Paste",
            align="end",
            direction="end",
        ),
    ]


my_action_menu_align_direction_examples = ui_action_menu_align_direction_examples()
```

## Open

The `is_open` and `default_open` props on the action menu control whether the menu is open by default. They apply controlled and uncontrolled behavior on the menu respectively.

```python
from deephaven import ui


@ui.component
def ui_action_menu_open_examples():
    is_open, set_is_open = ui.use_state(False)
    return [
        ui.text(f"Controlled menu open state: {is_open}"),
        ui.action_menu(
            "Cut",
            "Copy",
            "Paste",
            is_open=is_open,
            on_open_change=set_is_open,
        ),
        ui.action_menu(
            "Cut",
            "Copy",
            "Paste",
            default_open=True,
        ),
    ]


my_action_menu_open_examples = ui_action_menu_open_examples()
```

## API Reference

ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.

**Returns:** `Element` The rendered action menu element.

<ParamTable param={{"module_name": "deephaven.ui.", "name": "action_menu", "parameters": [{"name": "children", "type": "str | int | float | bool | BaseElement | Element", "description": "The contents of the collection."}, {"name": "is_disabled", "type": "bool | None", "description": "Whether the button is disabled.", "default": "None"}, {"name": "is_quiet", "type": "bool | None", "description": "Whether the button should be displayed with a quiet style.", "default": "None"}, {"name": "auto_focus", "type": "bool | None", "description": "Whether the element should receive focus on render.", "default": "None"}, {"name": "disabled_keys", "type": "Iterable[str | int | float | bool] | None", "description": "The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.", "default": "None"}, {"name": "align", "type": "Literal['start', 'end'] | None", "description": "Alignment of the menu relative to the trigger.", "default": "'start'"}, {"name": "direction", "type": "Literal['bottom', 'top', 'left', 'right', 'start', 'end'] | None", "description": "Where the Menu opens relative to its trigger.", "default": "'bottom'"}, {"name": "should_flip", "type": "bool | None", "description": "Whether the menu should automatically flip direction when space is limited.", "default": "True"}, {"name": "close_on_select", "type": "bool | None", "description": "Whether the Menu closes when a selection is made.", "default": "True"}, {"name": "trigger", "type": "Literal['press', 'longPress'] | None", "description": "How the menu is triggered.", "default": "'press'"}, {"name": "is_open", "type": "bool | None", "description": "Whether the overlay is open by default (controlled).", "default": "None"}, {"name": "default_open", "type": "bool | None", "description": "Whether the overlay is open by default (uncontrolled).", "default": "None"}, {"name": "on_action", "type": "Callable[[str | int | float | bool], None] | None", "description": "Handler that is called when an item is selected.", "default": "None"}, {"name": "on_open_change", "type": "Callable[[bool], None] | None", "description": "Handler that is called when the overlay's open state changes.", "default": "None"}, {"name": "flex", "type": "str | float | bool | None", "description": "When used in a flex layout, specifies how the element will grow or shrink to fit the space available.", "default": "None"}, {"name": "flex_grow", "type": "float | None", "description": "When used in a flex layout, specifies how the element will grow to fit the space available.", "default": "None"}, {"name": "flex_shrink", "type": "float | None", "description": "When used in a flex layout, specifies how the element will shrink to fit the space available.", "default": "None"}, {"name": "flex_basis", "type": "str | float | None", "description": "When used in a flex layout, specifies the initial main size of the element.", "default": "None"}, {"name": "align_self", "type": "Literal['auto', 'normal', 'start', 'end', 'center', 'flex-start', 'flex-end', 'self-start', 'self-end', 'stretch'] | None", "description": "Overrides the alignItems property of a flex or grid container.", "default": "None"}, {"name": "justify_self", "type": "Literal['auto', 'normal', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'center', 'left', 'right', 'stretch'] | None", "description": "Species how the element is justified inside a flex or grid container.", "default": "None"}, {"name": "order", "type": "int | None", "description": "The layout order for the element within a flex or grid container.", "default": "None"}, {"name": "grid_area", "type": "str | None", "description": "When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid.", "default": "None"}, {"name": "grid_row", "type": "str | None", "description": "When used in a grid layout, specifies the row the element should be placed in within the grid.", "default": "None"}, {"name": "grid_column", "type": "str | None", "description": "When used in a grid layout, specifies the column the element should be placed in within the grid.", "default": "None"}, {"name": "grid_row_start", "type": "str | None", "description": "When used in a grid layout, specifies the starting row to span within the grid.", "default": "None"}, {"name": "grid_row_end", "type": "str | None", "description": "When used in a grid layout, specifies the ending row to span within the grid.", "default": "None"}, {"name": "grid_column_start", "type": "str | None", "description": "When used in a grid layout, specifies the starting column to span within the grid.", "default": "None"}, {"name": "grid_column_end", "type": "str | None", "description": "When used in a grid layout, specifies the ending column to span within the grid.", "default": "None"}, {"name": "margin", "type": "str | float | None", "description": "The margin for all four sides of the element.", "default": "None"}, {"name": "margin_top", "type": "str | float | None", "description": "The margin for the top side of the element.", "default": "None"}, {"name": "margin_bottom", "type": "str | float | None", "description": "The margin for the bottom side of the element.", "default": "None"}, {"name": "margin_start", "type": "str | float | None", "description": "The margin for the logical start side of the element, depending on layout direction.", "default": "None"}, {"name": "margin_end", "type": "str | float | None", "description": "The margin for the logical end side of the element, depending on layout direction.", "default": "None"}, {"name": "margin_x", "type": "str | float | None", "description": "The margin for the left and right sides of the element.", "default": "None"}, {"name": "margin_y", "type": "str | float | None", "description": "The margin for the top and bottom sides of the element.", "default": "None"}, {"name": "width", "type": "str | float | None", "description": "The width of the element.", "default": "None"}, {"name": "height", "type": "str | float | None", "description": "The height of the element.", "default": "None"}, {"name": "min_width", "type": "str | float | None", "description": "The minimum width of the element.", "default": "None"}, {"name": "min_height", "type": "str | float | None", "description": "The minimum height of the element.", "default": "None"}, {"name": "max_width", "type": "str | float | None", "description": "The maximum width of the element.", "default": "None"}, {"name": "max_height", "type": "str | float | None", "description": "The maximum height of the element.", "default": "None"}, {"name": "position", "type": "Literal['static', 'relative', 'absolute', 'fixed', 'sticky'] | None", "description": "Specifies how the element is position.", "default": "None"}, {"name": "top", "type": "str | float | None", "description": "The top position of the element.", "default": "None"}, {"name": "bottom", "type": "str | float | None", "description": "The bottom position of the element.", "default": "None"}, {"name": "left", "type": "str | float | None", "description": "The left position of the element.", "default": "None"}, {"name": "right", "type": "str | float | None", "description": "The right position of the element.", "default": "None"}, {"name": "start", "type": "str | float | None", "description": "The logical start position of the element, depending on layout direction.", "default": "None"}, {"name": "end", "type": "str | float | None", "description": "The logical end position of the element, depending on layout direction.", "default": "None"}, {"name": "z_index", "type": "int | None", "description": "The stacking order for the element", "default": "None"}, {"name": "is_hidden", "type": "bool | None", "description": "Hides the element.", "default": "None"}, {"name": "id", "type": "str | None", "description": "The unique identifier of the element.", "default": "None"}, {"name": "aria_label", "type": "str | None", "description": "Defines a string value that labels the current element.", "default": "None"}, {"name": "aria_labelledby", "type": "str | None", "description": "Identifies the element (or elements) that labels the current element.", "default": "None"}, {"name": "aria_describedby", "type": "str | None", "description": "Identifies the element (or elements) that describes the object.", "default": "None"}, {"name": "aria_details", "type": "str | None", "description": "Identifies the element (or elements) that provide a detailed, extended description for the object.", "default": "None"}, {"name": "UNSAFE_class_name", "type": "str | None", "description": "Set the CSS className for the element. Only use as a last resort. Use style props instead.", "default": "None"}, {"name": "UNSAFE_style", "type": "Dict[str, Any] | None", "description": "Set the inline style for the element. Only use as a last resort. Use style props instead.", "default": "None"}, {"name": "key", "type": "str | None", "description": "A unique identifier used by React to render elements in a list.", "default": "None"}]}} />