Elementor Developers

# Context Menu Actions

Elementor Core Basic

The context menu popup contains groups, and within these groups are items called actions. Actions are applied to a selected element (section, column, widget). Behind the scenes, these actions are JS callback functions.

# Action Object

An action is a JS object containing the following properties and methods:

const action = {
	name: 'action-id',
	icon: 'eicon-code',
	title: 'Action Label',
	shortcut: '',
	isEnabled: () => true,
	callback: () => {},
};
1
2
3
4
5
6
7
8
  • Action Name - Unique ID used in the code.
  • Action Icon - Action icon, found at either Elementor Icons (opens new window) or FontAwesome Icons (opens new window).
  • Action Title - Label displayed to the user.
  • Action Shortcut - Keyboard shortcut that triggers the action.
  • Is Enabled - Defines whether the action enabled or disabled.
  • Action Callback - JS callback functions which apply to the selected element.

Please Note

Action keyboard shortcuts won't be covered in the documentation as it requires additional JS components configuration.

# Manage Actions

By hooking to the JS elements/context-menu/groups filter hook, you can add, modify, or delete action items.

← Add New Group →