Modifier	Acceptable values	Use cases	Description
mode	`'radio'`, `'radio-check'`, `'check'`	`BEMJSON`	The type of the menu.
disabled	`true`	`BEMJSON`, `JS`	The disabled state.
focused	`true`	`BEMJSON`, `JS`	The block is in focus.
theme	`'islands'`	`BEMJSON`	A custom design.
size	`'s'`, `'m'`, `'l'`, `'xl'`	`BEMJSON`	The size of the menu. Use sizes only for menus when the theme modifier is set to islands.

Custom fields of the block

Field	Type	Description
content	`Array`	The array of the menu items.
val	`String`, `Number`, `Array`	The selected value from the menu. If the mode modifier with check value is applied to the block, the selected values must be declared as an `array`.

Elements of the block

Element	Use cases	Description
group	`BEMJSON`	Visual grouping of menu items. The `content` field is required for this element.

Custom fields of the block elements

Element	Field	Type	Description
group	title	`String`	The name of the menu items group.

Block description

Use the menu block to control the state, behavior and appearance of the menu and its nested components – the item elements.

The block supports key-pad control. If menu block is in focus (focused modifier with true value), type a menu item name on your keyboard to switch to the menu item. Use Space bar or Enter buttons to select the menu item.

Modifiers of the block

`mode` modifier

Acceptable values: 'check, 'radio', 'radio-check'.

Use case: BEMJSON.

The mode modifier changes the type of the menu block depending on the selected value:

basic list (mode modifier is not specified)
multiple-choice list (mode modifier with check value)
mandatory single-choice list (mode modifier with radio value)
optional single-choice list (mode modifier with radio-check value).

Basic list (`mode` modifier is not specified)

If the mode modifier is not set to the block, the basic list without the possibility to select the menu item is created.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm' },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Swimming'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Skiing'
        }
    ]
}

Multiple-choice list (`mode` modifier with `check` value)

Use this modifier to create the menu with the possibility to select any number of menu items.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [1, 3],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        },
        {
            elem : 'item',
            val : 3,
            content : 'Downshifting'
        }
    ]
}

Mandatory single-choice list (`mode` modifier with `radio` value)

Use this modifier to create the menu that has one mandatory selected item.

If any item is not selected in BEMJSON declaration, the first menu item is selected by default.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

Optional single-choice list (`mode` modifier with `radio-check` value)

Use this modifier to create the menu that has one mandatory selected item like in the mandatory single-choice list. The fundamental difference between these two menu types is that the menu block with the mode modifier with the radio-check value has the opportunity to leave the menu without the selected items.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check' },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

`disabled` modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier makes the block inactive. The disabled block is visible but not available for user actions.

If menu block is disabled, all nested menu__item blocks are also disabled:

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check', disabled : true },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

The disabled modifier with the true value could be set to a separate menu items:

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check' },
    val : 2,
    content : [
        {
            elem : 'item',
            mods : { disabled : true },
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

`focused` modifier

Acceptable value: true.

Use cases: BEMJSON, JS.

The modifier puts the focus on the block.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio-check', focused : true },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

`theme` modifier

Acceptable value: 'islands'.

Use case: BEMJSON.

The modifier gives the block a custom design.

The islands theme requires the size modifier.

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'm' },
    val : [1],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

`size` modifier

Acceptable values for the islands theme: 's', 'm', 'l', 'xl'.

Use case: BEMJSON.

Use the size modifier only for blocks with the islands theme.

Sets the size value for all types of menus.

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 's' },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'm' },
    val : [2],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [2],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

{
    block : 'menu',
    mods : { theme : 'islands', mode : 'check', size : 'xl' },
    val : [2],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

Custom fields of the block

`content` field

Type: Array.

Specifies the list of the menu items.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm' },
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Vacation at work'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Vacation on the couch'
        }
    ]
}

`val` field

Type: String, Number, Array.

Specifies:

The selected value from the menu. In this case the field type is String or Number.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Vacation at work'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Vacation on the couch'
        }
    ]
}

The set of selected values from the menu. This case is possible if the block has the mode modifier set to check. The field type is an Array.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'check' },
    val : [1, 2],
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Skiing'
        },
        {
            elem : 'item',
            val : 2,
            content : 'Swimming'
        }
    ]
}

Elements of the block

`group` element

A visual grouping of the menu items that does not affect the general logic of items selection.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Work'
        },
        {
            elem : 'group',
            content : [
                {
                    elem : 'item',
                    val : 2,
                    content : 'Skiing'
                },
                {
                    elem : 'item',
                    val : 3,
                    content : 'Swimming'
                }
            ]
        },
        {
            elem : 'item',
            val : 4,
            content : 'Downshifting'
        }
    ]
}

Custom fields of the block elements

`title` field of `group` element

Type: String.

Specifies the title for a group of menu items.

{
    block : 'menu',
    mods : { theme : 'islands', size : 'm', mode : 'radio' },
    val : 2,
    content : [
        {
            elem : 'item',
            val : 1,
            content : 'Work'
        },
        {
            elem : 'group',
            title : 'Outdoor activity',
            content : [
                {
                    elem : 'item',
                    val : 2,
                    content : 'Skiing'
                },
                {
                    elem : 'item',
                    val : 3,
                    content : 'Swimming'
                }
            ]
        }
    ]
}