ProControls — Documentation

New here? See the Getting Started page for HTML setup, script tags, a minimal sketch, and the common options table.

Menu Input

A menu bar that runs either along the top (orientation: 'horizontal') or down the left side (orientation: 'vertical'). Items are defined as an array of strings; replace any string with an array to create a submenu — the first element of the array becomes the top-level label and the remaining elements are the submenu entries. Clicking a leaf item fires onChange; clicking a submenu parent toggles it open or closed.

new Menu(opts)

Options

Option	Type	Default	Description
items	Array	[]	Menu definition. Each entry is a `string` (leaf item) or a `string[]` (submenu) where `array[0]` is the top-level label and `array[1…n]` are the submenu entries.
orientation	string	'top'	Where the bar sits and which way submenus open: `'top'` — bar across the top, submenus open downward. `'bottom'` — bar across the bottom, submenus open upward. `'left'` — bar down the left side, submenus open rightward. `'right'` — bar down the right side, submenus open leftward. `'popup'` — floating vertical menu positioned at `x, y`; submenus and their arrow indicators automatically flip left or right depending on which half of the canvas the menu sits in.
x, y	number	0, 0	Canvas position of the top-left corner of the menu bar.
width	number	auto	Bar width. Horizontal: defaults to the total of all item widths. Vertical: defaults to the widest item label.
onChange	function	null	`onChange({label, path}[, control])` — called when a leaf item is selected. `label` is the selected item's text; `path` is an array from root to selection, e.g. `['Edit', 'Undo']`.
disabled	boolean	false	Suppresses all interaction and draws a disabled overlay.
theme	object	{}	Partial theme override. See Themes.

Properties

Property	Description
`.items`	Read/write. Reassign to change the menu structure. Set `_layoutDirty = true` after changing to force a layout rebuild.

Example — top

editable — changes update the preview

const menu = new Menu({
  x: 0, y: 0,
  width: 400,
  items: [
    'File',
    ['Edit', 'Undo', 'Redo', 'Cut', 'Copy', 'Paste'],
    'View',
    ['Help', 'About', 'Docs'],
  ],
  onChange: ({label, path}) => console.log(path),
});

Example — left

editable — changes update the preview

const menu = new Menu({
  x: 0, y: 0,
  orientation: 'left',
  items: [
    'File',
    ['Edit', 'Undo', 'Redo', 'Cut', 'Copy', 'Paste'],
    'View',
    ['Help', 'About', 'Docs'],
  ],
  onChange: ({label, path}) => console.log(path),
});

PopupMenu Input

A convenience wrapper around Menu pre-configured with orientation: 'popup'. Positions a floating vertical menu at the given x, y coordinate. Submenus and their arrow indicators automatically flip left or right depending on which half of the canvas the menu sits in. Accepts all the same options as Menu.

new PopupMenu(opts)

Inherits all Menu options. orientation is fixed to 'popup'.

Example

editable — changes update the preview

const menu = new PopupMenu({
  x: 20, y: 20,
  items: [
    'File',
    ['Edit', 'Undo', 'Redo', 'Cut', 'Copy', 'Paste'],
    'View',
    ['Help', 'About', 'Docs'],
  ],
  onChange: ({label, path}) => console.log(path),
});

Right-click context menu

editable — changes update the preview

function setup() {
  createCanvas(300, 200);
  document.oncontextmenu = () => false;
}

const menu = new PopupMenu({
  x: -500, y: -500,
  items: [
    'Add Shape',
    ['Color', 'Red', 'Green', 'Blue'],
    'Clear',
  ],
  onChange: ({label}) => print(label),
});

function draw() {
  background(245);
  fill(100); noStroke(); textSize(12); textAlign(CENTER, CENTER);
  text('Right-click anywhere', width/2, height/2);
}

function mousePressed() {
  if (mouseButton === RIGHT) {
    menu.x = mouseX;
    menu.y = mouseY;
  }
}

Menus

Menu Input

Options

Properties

Example — top

Example — left

PopupMenu Input

Example

Right-click context menu