Context menu button

The button for displaying the dropdown menu for executing different actions (e.g. navigation). The component supports both manual and dynamic options configuration, different positioning and adjustment options, as well as different appearance and styling options.

Methods

MethodDescription

setDisabled(disabled: boolean)

disables or enables the component

setMenuItems(items: object[])

sets the items of the menu

click()

triggers a click event

open()

opens the menu

close()

closes the menu

toggle()

toggles the menu

Triggers

Triggers allow you to launch certain actions based on different events.

On Init

Calls for an action on component initialization, e.g., page refresh

On Click

Calls for an action when a component is clicked

On Menu item Click

Calls for an action when a menu item is clicked

Trigger unique actions based on the selected menu item

To set up unique actions for each selected option, adhere to these steps:

  • Set up your menu items and assign each one a unique ID

  • Create a new action incorporating a JavaScript step and assign it to the On Menu Item Click trigger

  • Upon clicking a menu item, the action will be initiated, and the variable {{params.id}} will contain the value of the selected item ID. Use this code to activate distinct actions depending on the chosen item:

if ({{params.id}} === 'item_1') {
  await {{actions.itemOneClick.trigger()}};
  
} else if ({{params.id}} === 'item_2') {
  await {{actions.itemTwoClick.trigger()}};
  
} else if ({{params.id}} === 'item_2') {
  await {{actions.itemThreeClick.trigger()}};

}

Last updated

© 2024 UI Bakery