Examples
Examples
Basic Usage
The Actions in an Action Menu can be minimally set by passing in Action Items with a label.
Extended Usage
The Action Menu's header offers a dedicated area at the top of the Action Menu for context or additional information, such as personalised details.
Grouped Actions
Actions can be grouped to improve organization and user understanding, optionally using a header label to provide context for the grouped items.
Active/Selected
The active property indicates that an item is currently in effect or influencing the system. It's most relevant for persistent selections, helping users recognize active elements. For immediate actions an active state is less applicable as these are executed instantly without remaining in effect.
Align
The align attribute defines the horizontal position of the Action Menu relative to its anchor element. By default, the Action Menu adjusts automatically to avoid being cut off by the screen edges.
Placement
Specifying the placement attribute aligns the Dropdown vertically. By default, the Action Menu appears below its trigger. If space is limited, the Action Menu will automatically flip to avoid being cut off by the edge of the screen.
Width
If the width is not set, the menu will adjust to the width of the longest item listed, with a minimum width of 148px. You can specify a fixed or flexible width by using string values (e.g. '250px', '50%').
Height
The Action Menu automatically adjusts its height to fit its content by default, while also allowing for a custom maximum height to be set. It is recommended to define a maximum height for lists with numerous items, ensuring optimal display and user experience.