Button Menu
The Avonni Button Menu component displays a button that opens a dropdown menu. Use it whenever you need to surface a compact set of actions or choices — the menu can be triggered by click, hover, or focus, and supports label and/or icon triggers, a search input, a selection checkmark, and a draft indicator.
Overview
To start with the Avonni Button Menu component, you'll first need to connect it to your data and configure how it is displayed. The sections below follow the configuration panel from top to bottom, so you can read along as you build.
Configuration
To configure the Button Menu, select it on the canvas. The Edit Button Menu panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
Before you build your menu, you must tell the Avonni Button Menu component where to get the items it should display. You have several options, depending on the source and nature of your data:
Manual
Enter data directly into the component configuration.
Variable
This is useful for data that changes based on user interactions or other component logic.
Query
This is the most common option for displaying Salesforce records.
Data Mapping
When using a dynamic data source for your Button Menu, configure the Data Mappings section to tell the component how to map your data fields to menu item properties such as label, value, and icon.
Content
Variant
The Variant setting changes the visual appearance of the button trigger. The default value when no label is set is Border; the default when a label is present is Neutral.
Available variants: Bare, Bare Inverse, Base, Border, Border Filled, Border Inverse, Brand, Brand Outline, Container, Destructive, Destructive Text, Inverse, Neutral, and Success.
Label
Optional text displayed on the button trigger alongside the icon.
Icon Name
The Lightning Design System name of the icon shown on the button (for example, utility:settings). If an icon other than utility:down or utility:chevrondown is used, a down-arrow icon is appended to the right of it (unless Hide Down Arrow is enabled).
Icon Size
Controls the size of the trigger icon. Options: Xxs, Xs, Small, Medium (default), Large.
Icon Source
A URL or Content Document ID for a custom image to use as the trigger icon instead of a Lightning Design System icon.
Menu Alignment
Determines where the dropdown appears relative to the button. Options: Auto, Left (default), Center, Right, Bottom Left, Bottom Center, Bottom Right.
Menu Length
Sets the maximum visible height of the dropdown. Options: None (default, no restriction), 5 Items, 7 Items, 10 Items.
Menu Trigger
Specifies the user action that opens the menu. Options: Click (default), Hover, Focus.
Tooltip
Text displayed when the user mouses over or focuses on the button.
Hide Down Arrow
When enabled, hides the additional down-arrow that normally appears to the right of a custom icon.
Hide Checkmark
When enabled, hides the checkmark that indicates the currently selected menu item. The checkmark is otherwise shown next to the item whose value matches the Value setting.
Nubbin
When enabled, adds a nubbin (a small pointer stub) to the menu. The nubbin position follows the Menu Alignment setting.
Disabled
When enabled, the menu cannot be opened by users.
Alternative Text
Assistive text for the button menu, used by screen readers.
Is Draft
When enabled, the button trigger shows a draft indicator (a blue asterisk).
Draft Alternative Text
Describes the reason for showing the draft indicator. Required when Is Draft is enabled.
Title
Text displayed as a tooltip when the user hovers over the button menu trigger.
Value
The currently selected value. When set, a checkmark appears next to the menu item whose value matches this setting.
Show Search
When enabled, a search input appears at the top of the dropdown, allowing users to filter the menu items.
Search Input Placeholder
Placeholder text shown in the search input when it is empty. Requires Show Search to be enabled.
Actions
Actions are additional buttons displayed at the footer of the Button Menu dropdown. Each action has a Label, a Name (a unique identifier used in interactions), and an optional Icon Name.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
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. Use the targetName output to identify which item was selected and drive downstream logic such as navigation, record updates, or opening a flow screen.
Action Click
Fires when a user clicks one of the footer actions. Use the targetName output to identify which action was clicked and branch your flow logic accordingly.
Styling
Configure the Button Menu's appearance from the Style tab of the Edit Button Menu panel. The color sections below adapt to the Variant chosen in the Properties tab.
Controls the outer spacing around the button.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing inside the button.
Top / Right / Bottom / Left: Adjust the space on each side.
Sets the horizontal alignment of the button within its container.
Horizontal Alignment: Choose how the button is justified.
Customizes the trigger's label and icon (color set per variant).
Font Size / Font Style / Font Weight / Font Family: Adjust the label typography.
Color / Color Active / Color Hover: Set the text and icon color in each state.
Customizes the button border (color set per variant).
Size: Adjust the border thickness.
Style: Set the border style (solid, dashed, dotted, etc.).
Radius: Control the roundness of the corners.
Color / Color Active / Color Hover: Set the border color in each state.
Sets the button background (color set per variant).
Color / Color Active / Color Hover: Set the background color in each state.
Adjusts the internal block and inline spacing of the button (set per variant).
Block Start / Block End: Set the vertical spacing.
Inline Start / Inline End: Set the horizontal spacing.
Applies when a custom image is used via Icon Source.
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 elsewhere on the page after the user interacts with it.
Item Selection
When a user selects a menu item, these variables update with the chosen item's data.
Selected Item
Object
The selected menu item's data — its label, value, URL, icon name, and target.
Selected Item sObject
Record (SObject)
The full Salesforce record associated with the selected item. Requires a Query or Variable data source.
Example: When a user picks a status from the Button Menu, use Selected Item to read its value and update a record field, or use Selected Item sObject to pass the full record to a detail component on the same page.
Action Click
When a user clicks one of the footer actions, this variable identifies which action was triggered.
Clicked Action - Name
Text (String)
The name of the footer action the user clicked.
Example: Add a "Delete" footer action and branch page logic on Clicked Action - Name to show a confirmation modal only when that specific action is triggered.
Others
Clicked
Boolean
true while a menu item selection event is firing.
Number of Items
Number
The total number of items currently loaded in the menu.
Last updated
Was this helpful?