MenuItem

A widget representing a single menu item in a Menu. May be configured with a checked state which creates a checkbox which may be toggled. Can also be disabled, which affects item appearance and blocks interactions.

Fires events when activated which bubble up through the parent hierarchy and may be listened for on an ancestor. See Menu for more details on usage.

To add a border above a menu item, you can set separator to true. The separator is automatically hidden if the menu item is the first visible item in the menu.

This widget is not intended to be used directly

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

checked : Boolean/String

If configured with a Boolean value, a checkbox is displayed as the start icon, and the toggle event is fired when the checked state changes. String value allows linking value by reference name.

Example:

menu : {
    items : {
        fill : {
            text    : 'Fill width',
            checked : 'up.resourceColumns.fillWidth'
        },
        fit : {
            text        : 'Fit width',
            checked     : false,
            closeParent : true
        }
    }
}

Has a corresponding runtime checked property.

closeParent : Boolean

By default, upon activate, non-checkbox menu items will collapse the owning menu hierarchy.

Configure this as false to cause the menu to persist after activating an item
href : String

If provided, turns the menu item into a link
icon : String

Item icon class.

All Font Awesome icons may also be specified as 'fa fa-' + iconName.

Otherwise this is a developer-defined CSS class string which results in the desired icon.

menu : Object<String, MenuItemEntry | WidgetConfig>/(MenuItemEntry|WidgetConfig)[]

A submenu configuration object, or an array of MenuItem configuration objects from which to create a submenu.

Configuration object example:

new Menu({
    // Menu items
    items : {
        move : {
            text : 'Main item',
            menu : {
                // Submenu items
                firstItem : {
                    text : 'Sub-item 1',
                    onItem({ eventRecord }) {}
                },
                secondItem : {
                    text : 'Sub-item 2',
                    onItem({ eventRecord }) {}
                }
            }
        }
    }
});

Array of items example:

new Menu({
    // Menu items
    items : {
        move : {
            text : 'Main item',
            // Submenu items
            menu : [
                {
                    text : 'Sub-item 1',
                    onItem({ eventRecord }) {}
                },
                {
                    text : 'Sub-item 2',
                    onItem({ eventRecord }) {}
                }
            ]
        }
    }
});

Note that this does not have to be a Menu. The type config can be used to specify any widget as the submenu.

new Menu({
    // Menu items
    items : {
        move : {
            text : 'Main item',
            // Submenu items
            menu : [
                {
                    type  : 'textfield',
                    label : 'Type here'
                },
                {
                    type : 'button',
                    text : 'Confirm'
                }
            ]
        }
    }
});

Has a corresponding runtime menu property.

separator : Booleanfalse

Set to true to display a border above this menu item, if there are other visible menu items before it.
target : '_self'/'_blank'/'_parent'/'_top'/null

The target attribute for the href config
text : String/DomConfig/DomConfig[]

The text to be displayed in the item. The text is automatically HTML encoded.

Has a corresponding runtime text property.
toggleGroup : String
Indicates that this menu item is part of a group where only one can be checked. Assigning a value also sets toggleable to true.
```
const yesButton = new Button({
   toggleGroup : 'yesno',
   text        : 'Yes'
});

const noButton = new Button({
   toggleGroup : 'yesno',
   text        : 'No'
});
```
Has a corresponding runtime toggleGroup property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isMenuItem : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of MenuItem class, or subclass thereof.

checked : Boolean

Get/sets the checked state of this MenuItem and fires the toggle event upon change.

Note that this must be configured as a Boolean to enable the checkbox UI.

Has a corresponding checked config.
menu : Widget

READONLY

Returns the instantiated menu widget as configured by menu.

Has a corresponding menu config.
text : String/DomConfig/DomConfig[]

The text to be displayed in the item. The text is automatically HTML encoded.

Has a corresponding text config.
toggleGroup : String
Indicates that this menu item is part of a group where only one can be checked. Assigning a value also sets toggleable to true.
```
const yesButton = new Button({
   toggleGroup : 'yesno',
   text        : 'Yes'
});

const noButton = new Button({
   toggleGroup : 'yesno',
   text        : 'No'
});
```
Has a corresponding toggleGroup config.
isMenuItem : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of MenuItem class, or subclass thereof.

Functions

Functions are methods available for calling on the class

doAction( )

Actions this item. Fires the item event, and if this is a checked item, toggles the checked state, firing the toggle event.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

item

This menu item has been activated.

Note that this event bubbles up through parents and can be listened for on a top level Menu for convenience.
toggle

The checked state of this menu item has changed.

Note that this event bubbles up through parents and can be listened for on a top level Menu for convenience.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onItem

This menu item has been activated.

Note that this event bubbles up through parents and can be listened for on a top level Menu for convenience.
onToggle

The checked state of this menu item has changed.

Note that this event bubbles up through parents and can be listened for on a top level Menu for convenience.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-menu-item-background	Menu item background
--b-menu-item-border-radius	Menu item border radius
--b-menu-item-color	Menu item color
--b-menu-item-font-weight	Menu item font-weight
--b-menu-item-gap	Gap between menu item parts (icon, text, sub-menu icon)
--b-menu-item-icon-color	Color for menu item's icon
--b-menu-item-icon-width	Menu icon width, to make sure everything lines up nicely
--b-menu-item-min-width	Minimum width of a menu item
--b-menu-item-padding	Menu item padding
--b-menu-item-separator-border-color	Separator item color
--b-menu-item-separator-height	Height of the separator
--b-menu-item-separator-inset	Inset-inline for the separator
Disabled
--b-menu-item-disabled-color	Color for disabled menu item
--b-menu-item-disabled-icon-color	Color for disabled menu item's icon
Focused
--b-menu-item-focus-background	Background for focused menu item
--b-menu-item-focus-color	Color for menu item when focused
--b-menu-item-focus-icon-color	Color for menu item's icon when hovering the item
Hovered
--b-menu-item-hover-background	Background for hovered menu item
--b-menu-item-hover-color	Color for menu item when hovering it
--b-menu-item-hover-icon-color	Color for menu item's icon when hovering the item

MenuItem

Configs

Properties

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree3

Mixins5

Contents