Simple context menu for the web.

Usage no npm install needed!

<script type="module">
  import easycontext from 'https://cdn.skypack.dev/easycontext';



Simple context menu for the web.

Version License: MIT

· Homepage · View Demo · Report Bug / Request Feature ·

Table of Contents



npm install easycontext


<script src="https://unpkg.com/easycontext"></script>


Import as module:

import { contextmenu } from 'easycontext';

Or when using the CDN:

const { contextmenu } = easycontext;


Use contextmenu for selecting one or more HTMLElements to append a context menu to. You can it one ore more HTMLElements, a selector string or a NodeList. It uses Universal Element Accept under the hood.


contextmenu('#my-button', [
    text: 'This is a button',
    onClick() {
      console.log('Do something');

// you can also use a funtion to dynamically generate menu items:
contextmenu('button', (target) => {
  return target.classList.contains('removable')
    ? [
          text: 'Remove',
          onClick() {
    : [
          text: 'This is not clickable',

// you can also just add a context menu to everything
contextmenu(document, [
    text: 'Reload page',
    onClick() {


 * Creates a context menu for given element(s) / selector string
 * @param element Single HTMLElement, Array or query selector string (using @compactjs/uea)
 * @param items Menu items or function that returns menu items
 * @param options Additional Options
function contextmenu(
  element: string | HTMLElement | HTMLElement[] | HTMLCollection | NodeList,
  items: MenuItem[] | ((target: HTMLElement) => MenuItem[]),
  options?: MenuOptions
): void;

interface MenuItem {
   * Menu item text, can also be HTML
  text?: string;
   * A custom classname
  className?: string;
   * Function that is called when item is clicked.
   * Not clickable, when omitted.
  onClick?: (event: Event) => void;

interface MenuOptions {
   * Parent element for the menu element to append to
   * @default document.body
  parentElement: HTMLElement;
   * Document Root, internaly used for adding a click listener to hide context menu.
   * @default document
  root: Document | HTMLElement;
   * Custom class name for context menu
   * @default 'context-menu'
  className: string;

Run tests

npm run test


👤 Timo Bechtel

🤝 Contributing

Contributions, issues and feature requests are welcome!

  1. Check issues
  2. Fork the Project
  3. Create your Feature Branch (git checkout -b feat/AmazingFeature)
  4. Test your changes npm run test
  5. Commit your Changes (git commit -m 'feat: add amazingFeature')
  6. Push to the Branch (git push origin feat/AmazingFeature)
  7. Open a Pull Request

Commit messages

This project uses semantic-release for automated release versions. So commits in this project follow the Conventional Commits guidelines. I recommend using commitizen for automated commit messages.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Distributed under the MIT License.

This README was generated with ❤️ by readme-md-generator