Actions Menu

The Actions Menu custom element adds the tool bar where the player can select verbs and inventory items to use on the game world.

The actions menu changes location, depending on the player’s screen orientation, optimized to show as much of the game area as possible. If the screen orientation is portrait, the menu will appear on the bottom. If the screen orientation is landscape, it will appear on the left.

The theme of the component will change depending on if light or dark mode is specified in the player’s operating system. It defaults to a light theme.


The tag should be added inside the <body> tag, and outside the The Stage element, usually inside a Scenes file.

The elements takes a single attribute - verbs - the contents of which should be a space seperated list of words, in the same mannor as the standard class attribute.

Each word in the verbs attribute will be made available to players as ways to interact with the game world. See other components for options on how you can utilize these verbs to respond to player actions.

Any content added inside the tag will be ignored.


<actions-menu verbs="push pull talk take open close give look"></actions-menu>

HTML attributes


Space seperated list of words to be transformed into player actions.


Space seperated list of words to be transformed into player items. Generated dynamically based on player actions.

JavaScript code signature

The component extends HTMLElement.

class ActionsMenu()

Class represeting the utility bar for verbs and inventory.

Create the text display.

ActionsMenu.attributeChangedCallback(name, oldValue, newValue)

Respond to attribute changes.

  • name (string) – The name of the attribute changed.

  • oldValue (string) – The previous value of the attrbute.

  • newValue (string) – The just-changed value of the attribute.



See also

  • {@linkcode ActionsMenu#observedAttributes}


Set the attributes to watch for changes.