Button Menu
The Avonni Button Menu component offers a compact way to access multiple related options through a clickable button.
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
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
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 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.
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.
Controls the inner spacing between the button menu and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
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.
Sets the button background (set per variant).
Color / Color Active / Color Hover: Set the background in each state.
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.
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.
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.
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.
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 or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?