Context menu

A context menu is a list of options that opens on a right click (or with the menu key of the keyboard) on the component that declares it. Its options are context-button elements, with the same attributes as a button and the same actions; a context-separator draws a line between groups and a context-button inside another one makes a submenu. Buttons, grids, tree grids, charts, tabs and wizards can declare one. Here the component is a button: right-click it, pick an option and the read-only field shows which one ran.

Live preview

LightDark

Controls

Button label

Opens with

Right clickLeft click

Icons

Export submenu

Separator before Delete

XML

<button id="demo" label="Customer actions">
  <context-button id="Edit" label="Edit" icon="lucide:pencil">
    <button-action type="value" target="LastAction" value="Edit" />
  </context-button>
  <context-button id="Duplicate" label="Duplicate" icon="lucide:copy">
    <button-action type="value" target="LastAction" value="Duplicate" />
  </context-button>
  <context-separator />
  <context-button id="Delete" label="Delete" icon="lucide:trash-2">
    <button-action type="value" target="LastAction" value="Delete" />
  </context-button>
</button>
<criteria id="LastAction"
          component="text"
          label="Last option chosen"
          readonly="true" />

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
label	Button label	text
dependency	Opens with	rightclick
context-button	Icons	true / false
context-button	Export submenu	true / false
context-separator	Separator before Delete	true / false

Events and actions

Event	Description
click	Stored in the option of the menu when the user chooses it.

Action (type)	What it does
show-context-menu	Opens the context menu under the button that launches it, with a left click.

Full reference

• Full documentation of this component
• XSD reference of the element

note

The menu is drawn over the whole page, outside the preview, so it follows the colour mode of the site and not the one of the Light / Dark switch of the preview.

Recipes

Row actions menu

A button with the show-context-menu action opens its own menu with a left click, just under itself: the usual "more actions" button. This is also how each row of a grid gets a button that opens the context menu of the grid.

<button id="More" label="More actions" icon="lucide:ellipsis" style="no-label">
  <button-action type="show-context-menu" />
  <context-button id="Rename" label="Rename" icon="lucide:pencil">
    <button-action type="value" target="Chosen" value="Rename" />
  </context-button>
  <context-button id="Move" label="Move to folder" icon="lucide:folder-input">
    <button-action type="value" target="Chosen" value="Move to folder" />
  </context-button>
  <context-button id="Archive" label="Archive" icon="lucide:archive">
    <button-action type="value" target="Chosen" value="Archive" />
  </context-button>
</button>
<criteria id="Chosen" component="text" label="Last option chosen" readonly="true" />

Options that run any action

The actions of an option are the ones of any button. Here Edit opens a dialog and Delete asks for a confirmation with a predefined message: the confirm dialog is the real one, and Accept lets the actions that follow it go on.

<button id="Customer" label="Right-click the customer">
  <context-button id="EditOpt" label="Edit" icon="lucide:pencil">
    <button-action type="dialog" target="EditCustomer" />
  </context-button>
  <context-separator />
  <context-button id="DeleteOpt" label="Delete" icon="lucide:trash-2">
    <button-action type="confirm" target="DeleteMsg" />
  </context-button>
</button>

<dialog id="EditCustomer" label="Edit customer" style="modal-sm">
  <tag type="div" style="modal-body" label="Update the data of the customer and save the changes." />
  <tag type="div" style="modal-footer">
    <button id="CloseEdit" label="Close" style="btn-primary">
      <button-action type="close" target="EditCustomer" />
    </button>
  </tag>
</dialog>

<message id="DeleteMsg" title="Delete the customer?" message="The customer and its orders will be deleted." />

Events and actions

Choosing an option stores its click event, so a dependency can react to it. Its actions run in the context of the component that owns the menu.

Action	Description
show-context-menu	Opens the context menu under the button that launches it (a button of a grid row opens the menu of its grid)

If none of the options is visible (for example, because of their dependencies) the menu does not open and the browser menu is shown instead. When a component sits inside another one that also declares a menu, the menu of the inner component wins. A right click on a row of a grid or tree grid selects the row before the menu opens.

More

• Full documentation of the context menu: where it can be declared, dependencies and permissions.
• XSD reference of the context-button element and of the context-separator element.