Add elements or components to context menu

Answered
Daniel Rutledge asked on April 8, 2019

Hello, is there any way to add HTML elements or react components (i.e a button) inside the custom context menu, or is the handler function the only behavior we can control?
 
I ask because I'd like the ability to display application links inside the context menu, but it seems the only way to do it currently is to programmatically induce a navigation (i.e history.push). Let me know if you have any suggestions for achieving this.

1 answer

Public
Vera Didenko Vera Didenko Flexmonster April 8, 2019

Hello, Daniel,

Thank you for your question.

Context menu can be customized via customizeContextMenu API call.
The new functionality of each newly added element is defined through the handler function.
Here is an example: 

function customizeFlexmonsterContextMenu(items, data, viewType) {
items.push(
{label: "Hi",
submenu: [
{
label: "Hallo",
handler: function() {
alert("Hi from Germany ;-) ")
}
},
{
label: "Hello",
handler: function() {
alert("Hi from here ;-) ")
}
},
{
label: "Learn more",
handler: function() {
document.location.href = "https://www.flexmonster.com/api/customizecontextmenu/";
}
}

]
});

return items;
}

Here is a JSFiddle example for visualization.
 
At the moment this is the only way how new items can be added to the context menu.
Please see our customizing context menu guide for more details.
 
Please let us know if you have further questions.
 
Best Regards,
Vera

Please login or Register to Submit Answer