context menus, simple and highly customisable
- Simple API
- Add context menu to any element by CSS selector
- Add keyboard shortcuts
- Style not corrupted by the website do to the use of shadow dom
- Add custom HTML to the menu
- Submenus, Icons
import {contextMenu} from '../contextmenu.js';
contextMenu.add([
{
label: 'Button',
action: e => alert(e.target.textContent),
icon: '<svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>',
selector: 'button'
},{
label: 'More',
icon: 'add_circle',
children: [
{
label: 'Submenu 1',
icon: 'delete',
action(e) { alert(this.label + ' by ' + e.originalEvent.type) },
shortcut: 'Ctrl+1',
},
{
label: 'Submenu 2',
icon: 'edit',
action(e) { alert(this.label + ' by ' + e.originalEvent.type) },
shortcut: 'Ctrl+2',
},
]
},
]);
<button>button 1</button>
<button>button 2</button>
Adds a context menu to the page. items
is an array of menu items. Each item is an object with the following properties:
label
: The text of the menu item.action
: A function to call when the menu item is clicked. The function is passed anevent
object.event.target
: The element that matched the selector.event.originalEvent
: The original event that triggered the menu.event.preventHide
: (boolean) If set to true, the contextmenue will not disappear after the action is called.this
: The menu item object.
onparse
: A function to call when the menu item prepaired for the current context. The function is passed anevent
object.event.target
: The element that matched the selector.event.originalEvent
: The original event that triggered the menu.this
: The menu item object.
shortcut
: A keyboard shortcut to trigger the menu item (whitout the open context menu). Example:'Ctrl + I + O'
.selector
: A CSS selector for the type of element the menu item should appear for. If no selector is provided, the menu item will appear everywhere.icon
: SVG-string or name of a material icon.html
: Custom HTML to display in the menu item. If this is provided,action
,label
andicon
are ignored.children
: An array of sub-menu items. Each sub-menu item has the same properties as a top-level menu item.
Adds a single menu item to the context menu. item
is an object with the same properties as the items in contextMenu.add()
.
- return value: The menu item object.
import * as module from "https://cdn.jsdelivr.net/gh/u1ui/contextmenu.js@x.x.x/contextmenu.min.js"
- MIT License, Copyright (c) 2022 (like all repositories in this organization)
- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥