EN RU
Forum

Methodology

Technology

Toolbox

Libraries

Tutorials

DocumentationJSDocSource

menu

Use this block for creating different types of menu.

Overview

Modifiers of the block

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 menu-item blocks.

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)

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

Open in a new window

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.

Open in a new window

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.

Open in a new window

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.

Open in a new window

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:

Open in a new window

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

Open in a new window

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 : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Skiing'
        },
        {
            block : 'menu-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.

Open in a new window

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.

s

Open in a new window

m

Open in a new window

l

Open in a new window

xl

Open in a new window

Custom fields of the block

content field

Type: Array.

Specifies the list of the menu items.

Open in a new window

val field

Type: String, Number, Array.

Specifies:

  • The selected value from the menu. In this case the field type is String or Number.
Open in a new window
  • 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.
Open in a new window

Elements of the block

group element

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

Open in a new window

Custom fields of the block elements

title field of group element

Type: String.

Specifies the title for a group of menu items.

Open in a new window
menu
Instance methods:
getItems
setContent
searchItemByKeyboardEvent
_onFocus
_onBlur
menu_mode
Instance methods:
getVal
_getVal
setVal
_setVal
setContent
menu_mode_check
Instance methods:
_getVal
_setVal
_onItemClick
menu_mode_radio-check
Instance methods:
_getVal
_setVal
_onItemClick
menu_mode_radio
Instance methods:
_getVal
_setVal
_onItemClick

Block menu

Augments:control

Instance methods:

getItems():menu-item
description
Returns items
setContent(content):menu
description
Sets content
parameters
content
String, jQuery
searchItemByKeyboardEvent(e):menu-item
description
Search menu item by keyboard event
parameters
e
jQuery.Event
_onFocus()override
_onBlur()override

menu_mode

Instance methods:

getVal():Any
description
Returns menu value
_getVal():Anyprotectedabstract
setVal(val):menu
description
Sets menu value
parameters
val
*
_setVal(val):Booleanprotectedabstract
parameters
val
*
setContent()override
description
Sets content

menu_mode_check

Instance methods:

_getVal()override
_setVal(vals)override
parameters
vals
Array
_onItemClick()override

menu_mode_radio-check

Instance methods:

_getVal()override
_setVal()override
_onItemClick()override

menu_mode_radio

Instance methods:

_getVal()override
_setVal()override
_onItemClick()override