Context Menu

Animated context menu component that does not require JavaScript coding for a basic use. This component is framework-agnostic, it will play nicely in combination with any UI framework.

Example

Usage

1. Include `zuix.js` library

If not already included, add the following line right before the end of the head section in the HTML document:

<script src="https://cdn.jsdelivr.net/npm/zuix-dist"></script>

2. Add the context menu `div` markup

Put inside the field menu the code of your menu items.

<div z-load="@lib/components/context-menu"
     z-context="my-menu">
  <div #menu>
    <!-- menu items list -->
    <button>Option 1</button>
    <button>Option 2</button>
    <button>Option 3</button>
  </div>
</div>

The context menu already provides basic styling for the button element, though you can use any kind of element and custom styling.

Option attributes

z-load="@lib/components/context-menu" constructor
load the context-menu component on the element.
z-context optional
identifier name to be used to access this component from JavaScript.

Scripting

Event listeners

var contextMenu;
zuix.context('my-menu', (menu) => {
  menu.on({
    open: function() { /* ... */ },
    close: function() { /* ... */ }      
  });
  // store a global reference of
  // the component for later use
  contextMenu = menu;
});

Programmatically show/hide

// show the menu
contextMenu.show();

// hide the menu
contextMenu.hide();

Example

Controllers

Components