Context Menu

<zn-context-menu> | ZnContextMenu

Since 2.0

experimental

Opens a menu where its content is right-clicked.

Wrap content in <zn-context-menu> and put a <zn-menu> in its menu slot. Right-clicking anywhere in the content opens the menu at the pointer. Shift+F10 and the context menu key open it under the focused element. Choosing an item closes the menu.

Right-click anywhere in this panel.

Settings for this app

Mute this category

<zn-context-menu>
  <zn-panel caption="Right-click me">Right-click anywhere in this panel.</zn-panel>
  <zn-menu slot="menu">
    <zn-menu-item value="settings">Settings for this app</zn-menu-item>
    <zn-menu-item value="mute">Mute this category</zn-menu-item>
  </zn-menu>
</zn-context-menu>

Use disabled to leave the browser’s own context menu in place.

Opening From a Button

A descendant with context-menu-trigger opens the menu below itself on click, so the menu is reachable without a right-click, on touch screens and with the keyboard.

Right-click, or use the button.

Mark as read

Settings

This app

<zn-context-menu>
  <zn-panel caption="Notification">
    <zn-button slot="actions" icon="ellipsis@lu" icon-button="small" tooltip="More" context-menu-trigger plain></zn-button>
    Right-click, or use the button.
  </zn-panel>
  <zn-menu slot="menu">
    <zn-menu-item value="read">Mark as read</zn-menu-item>
    <zn-menu-label>Settings</zn-menu-label>
    <zn-menu-item value="settings">This app</zn-menu-item>
  </zn-menu>
</zn-context-menu>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.10/dist/components/context-menu/context-menu.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.10/dist/components/context-menu/context-menu.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/context-menu/context-menu.js';

Slots

Name	Description
(default)	The content that opens the menu when right-clicked. A descendant with `context-menu-trigger` also opens it on click.
`menu`	The `zn-menu` to open.

Learn more about using slots.

Properties

Name	Description	Type	Default
`disabled`	Disables the menu, leaving the browser’s own context menu.	`boolean`	`false`
`open`	Reflects whether the menu is showing, so the content can keep a highlight while it is.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Methods

Name	Description	Arguments
`showMenu()`	Opens the menu at a point given in viewport coordinates; `bottom-end` hangs it to the left of the point.	`clientX: number, clientY: number, placement: 'bottom-start' \| 'bottom-end'`

Learn more about methods.

Dependencies

This component automatically imports the following dependencies.

<zn-dropdown>
<zn-example>