Context Menu

new ac.navigations.ContextMenu(
    {
        target: "#contextmenutarget",
        items: items,
        beforeItemRender: (e) => {
            if (e.item.text === "Disabled Item") {
                e.element.classList.add("a-disabled");
            }
        }
    },
    "#cntlContextMenu"
);

ac.core.select("#contextmenutarget").textContent = "Right click or touch and hold to open the ContextMenu.";

<div class="contextmenu-control">
    <div id="contextmenutarget"></div>
    <ul id="cntlContextMenu"></ul>
</div>

const items = [
    {
        text: "Cut",
        iconCss: "a-cm-icons a-cut"
    },
    {
        text: "Copy",
        iconCss: "a-cm-icons a-copy"
    },
    {
        text: "Paste",
        iconCss: "a-cm-icons a-paste",
        items: [
            {
                text: "Paste Text",
                iconCss: "a-cm-icons a-pastetext"
            },
            {
                text: "Paste Special",
                iconCss: "a-cm-icons a-pastespecial"
            }
        ]
    },
    {
        separator: true
    },
    {
        text: "Disabled Item",
        iconCss: "a-cm-icons a-link"
    },
    {
        text: "New Comment",
        iconCss: "a-cm-icons a-comment"
    }
];

.contextmenu-control {
    margin: 5% 25%;
    width: auto;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
}

#contextmenutarget {
    border: 1px dashed;
    border-radius: 4px;
    height: 250px;
    padding: 10px;
    position: relative;
    text-align: center;
    line-height: 17;
    font-size: 14px;
}