octobercms/october · error · Error

command option is not set for menu item

Error message

command option is not set for menu item

What it means

The dropdown-menu item Vue component throws in its click handler when an item has no `command` and no href or submenu to fall back on — the click would have nothing to emit. It is the JavaScript mirror of the PHP ItemDefinition constructor rule and fires at interaction time when items were supplied as plain objects that bypassed server-side construction.

Source

Thrown at modules/backend/vuecomponents/dropdownmenu/assets/js/menuitem.js:97

                ev.preventDefault();
                ev.stopPropagation();
                return false;
            }

            if (this.hasSubmenu) {
                this.showSubmenu();
                ev.preventDefault();
                ev.stopPropagation();
                return false;
            }

            if (this.href) {
                this.$emit('closemenu');
                return;
            }

            if (!this.command) {
                throw new Error('command option is not set for menu item');
            }

            ev.preventDefault();
            ev.stopPropagation();

            this.$emit('command', this.command);
            return false;
        },

        onMouseEnter: function onMouseEnter() {
            this.$emit('itemmouseenter', this.componentUid);
            this.showSubmenu();

            if (!this.disabled && this.$refs.itemElement) {
                var that = this;
                Vue.nextTick(function () {
                    that.$refs.itemElement.focus();
                });

View on GitHub (pinned to b608633a7e)

Solutions

  1. Add a command to every clickable item: {label:'Do it', command:'do:it'}.
  2. Use href for navigation items or items:[...] for submenus — those paths do not require command.
  3. Map/sanitize API-driven item lists to guarantee the command key exists before rendering.

Example fix

// before
items: [
    { label: 'Duplicate' }
]

// after
items: [
    { label: 'Duplicate', command: 'duplicate' }
]
Defensive patterns

Strategy: validation

Validate before calling

function menuItemsAreActionable(items) {
    return items.every(function (item) {
        return Boolean(item.command || item.href || (item.items && item.items.length));
    });
}

if (!menuItemsAreActionable(this.items)) {
    console.error('Dropdown menu contains items without command/href/submenu');
}

Prevention

When it happens

Trigger: Passing a plain items array to the dropdown menu component containing {label:'Do it'} without command, then clicking it; a computed property that drops the command key; an item intended as a link that also lacks href.

Common situations: Menus assembled client-side instead of via the PHP ItemDefinition pipeline; dynamic items from an API response missing the command field; refactors renaming command to action.

Related errors


AI-assisted analysis of octobercms/october@b608633a7e (2026-08-21). Data as JSON: /api/errors/d42281b403ce24c2. Report an issue: GitHub.