---
description: How to include a context menu item based on Blockly's state.
---

# Customizing context menus

## 6. Precondition: Blockly state

Disabling your context menu options half of the time is not useful, but you may want to show or hide an option based on what the user is doing. For example, let's show a **Help** option in the context menu if the user doesn't have any blocks on the workspace. Add this code in `index.js`:

```js
function registerHelpItem() {
  const helpItem = {
    displayText: 'Help! There are no blocks',
    preconditionFn: function (scope) {
      if (!(scope.focusedNode instanceof Blockly.WorkspaceSvg)) return 'hidden';
      if (!scope.focusedNode.getTopBlocks().length) {
        return 'enabled';
      }
      return 'hidden';
    },
    callback: function (scope) {},
    id: 'help_no_blocks',
    weight: 100,
  };
  Blockly.ContextMenuRegistry.registry.register(helpItem);
}
```

Don't forget to call `registerHelpItem` from your `start` function.

### Test it

- Reload your page and open a context menu on the workspace. You should see an option labeled "Help! There are no blocks".
- Add a block to the workspace and open a context menu on the workspace again. The **Help** option should be gone.
