Menu

Menu widget, displays a list of items which the user can select from using mouse or keyboard. A menu can also have submenus by configuring the menu config of a MenuItem. A menu is typically only shown when right-clicking an element in the DOM. Try right-clicking the DIV rectangle below.

A common usecase is to attach a menu to a Button, which is supported via the menu config.

Menu item interaction handling in a complex widget

In the case of a menu which is part of a complex UI within a larger Bryntum widget, use of the string form for handlers is advised. A handler which starts with 'up.' will be resolved by looking in owning widgets of the Menu. For example a Calendar may have handlers for its MenuItems configured in:

new Calendar({
    appendTo : document.body,
    project  : myProjectConfig,
    tbar  : {
        items : {
            settings : {
                type : 'button',
                text : 'Settings',

                // High weight so it goes at the end
                weight : 800,
                menu   : [{
                    text     : 'Hide non-working days',
                    checked  : false,

                     // The Menu's ownership will be traversed to find this function name.
                    onToggle : 'up.toggleHideNonWorkingDays'
                }, {
                    text    : 'Clear changes',

                     // The Menu's ownership will be traversed to find this function name.
                    onItem : 'up.clearUncommittedChanges'
                }]
            }
        }
    },

    // Menu handlers found here
    toggleHideNonWorkingDays({ checked }) {
        // Use Calendar API which creates event in the selected date
        this.hideNonWorkingDays = checked;
    },

    clearUncommittedChanges() {
        // Clear changes to our event store which are not yet synced to the server
        this.eventStore.revertChanges();
    }
});

let menu = new Menu({
    forElement : btn.element,
    items      : [
        {
            icon : 'b-icon b-icon-add',
            text : 'Add'
        },
        {
            icon : 'b-icon b-icon-trash',
            text : 'Remove'
        },
        {
            icon     : 'b-icon b-icon-lock',
            disabled : true,
            text     : 'I am disabled'
        },
        {
            text : 'Sub menu',
            menu : [{
                icon : 'fa fa-play',
                text : 'Play'
            }]
        }
    ],
    // Method is called for all ancestor levels
    onItem({ item }) {
        Toast.show('You clicked ' + item.text);
    }
});