> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/button-menu.md).
# Button Menu
The Avonni Button Menu displays a button that opens a dropdown of selectable menu items. Use it to surface multiple related options — navigation choices, record actions, or workflow branches — without cluttering the screen.
***
## Tutorials
| Name | Description | Illustration |
| ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
| [**How to change dynamically button menu icons**](/flow/tutorials/components/button-menu/how-to-change-dynamically-avonni-button-menu-icons.md) | This Tutorial teaches how to change Avonni Button Menu icons based on user selections, improving interface responsiveness. |  |
***
## Overview
The Button Menu trigger can show a label, an icon, or both. When clicked, a dropdown appears with the configured menu items. The **On Select** interaction fires when a user picks an item, carrying the selected item's name as an output variable.
### Example
Setting
Value
Menu Items
Item 1 / Item 2
Label
My Button Menu
Icon Size
Medium
Menu Alignment
Left
***
## Configuration
To configure it, click the component on the Flow screen. The Edit Button Menu Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
### Properties
**Label** — optional text shown on the button trigger alongside the icon.
**Variant** — controls the visual style of the trigger button: Bare, Bare-Inverse, Base, Border, Border-Filled, Border-Inverse, Brand, Brand-Outline, Container, Destructive, Destructive-Text, Inverse, Neutral, or Success.
**Icon Name** — Lightning Design System icon for the trigger. If an icon other than `utility:down` or `utility:chevrondown` is used, a down-arrow is appended to the right (unless **Hide Down Arrow** is enabled). Specify in the format `utility:settings`.
**Icon Size** — controls how large the trigger icon appears: XX-Small, X-Small, Small, Medium, or Large.
**Icon Source** — a custom image URL or Salesforce ContentDocumentId used as the trigger icon.
**Disabled** — when enabled, users cannot open the menu.
**Alternative Text** — accessible text describing the button for screen readers.
**Title** — tooltip text shown when hovering over the trigger button.
**Tooltip** — text to display when the user mouses over or focuses on the button.
### Menu
**Menu Alignment** — position of the dropdown relative to the trigger: Auto, Left, Center, Right, Bottom-Left, Bottom-Center, or Bottom-Right. Default: Auto.
**Trigger** — which user action opens the menu: Click (default), Hover, or Focus.
**Hide Down Arrow** — when enabled, hides the additional down-arrow that normally appears next to a custom icon.
**Nubbin** — when enabled, shows a small pointer stub on the dropdown menu pointing back toward the button. Its position follows the **Menu Alignment** setting.
**Menu Items** — configure the list of items in the dropdown. For each item, set:
* **Label** — the text shown in the menu.
* **Value** — a unique identifier used in the **On Select** interaction to determine which item was picked.
* Optionally, a prefix icon name and suffix icon name.
**Value** — set this to the value of a menu item to display a checkmark next to it, indicating the current selection.
***
## Interactions
[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Button Menu. Configure them from the **Interactions** tab of the Edit Button Menu panel.
### Select
Fires when a user selects a menu item. The `targetName` output variable holds the value of the item that was picked, which you can use to branch the flow or trigger a downstream action.
***
## Styling
The **Style** tab gives you control over the button menu's spacing, button colors, label typography, border, and image. Configure it from the **Style** tab of the button menu's property editor.
{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the button menu, creating space between it and other elements on the screen.
* **Top / Right / Bottom / Left:** Adjust the space on each side of the button menu.
{% endtab %}
{% tab title="Padding" %}
Controls the *inner* spacing between the button menu and its border.
* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
{% endtab %}
{% tab title="Spacing" %}
Controls the button's internal block and inline spacing (set per variant).
* **Block Start / Block End:** Adjust the vertical spacing.
* **Inline Start / Inline End:** Adjust the horizontal spacing.
{% endtab %}
{% tab title="Background" %}
Sets the button background (set per variant).
* **Color / Color Active / Color Hover:** Set the background in each state.
{% endtab %}
{% tab title="Text/Icon" %}
Styles the button label and icon (colors set per variant).
* **Color / Color Active / Color Hover:** Set the text and icon color in each state.
* **Font Size / Font Style / Font Weight / Font Family:** Control the label typography.
{% endtab %}
{% tab title="Border" %}
Customizes the button border (colors set per variant).
* **Color / Color Active / Color Hover:** Set the border color in each state.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
{% endtab %}
{% tab title="Image" %}
Styles the image shown on the button.
* **Border Color / Border Size / Border Style / Border Radius:** Customize the image border.
* **Image Object Fit:** Control how the image fills its area.
{% endtab %}
{% endtabs %}
## Output Variables
The Button Menu exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Button Menu component, and pick the output variable you need.
### Item Selection
Updates when a user selects a menu item.
| Output variable | Type | What it returns |
| --------------------------- | ------------- | -------------------------------------------------- |
| **Selected Menu Item Name** | Text (String) | The value of the most recently selected menu item. |
> **Example:** A Button Menu offers three workflow actions — "Approve", "Reject", "Escalate". After the screen, check **Selected Menu Item Name** to branch the flow to the correct next step.
### Flow Interaction Output Variables
Like all interactive Flow components, the Button Menu exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).
---
# 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:
```
GET https://docs.avonnicomponents.com/flow/flow-components/button-menu.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.