Forum

Methodology

Toolbox

Platform

Community

desktop
touch-pad
touch-phone

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 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)

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 : [
        {
            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.

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__item

Overview

Modifiers of the block

Modifier Acceptable values Use cases Description
type 'link' BEMJSON The menu item implemented by the link block.
disabled true BEMJSON, JS The disabled state.
hovered true The hovered state.

Custom fields of the block

Field Type Description
val Number, String The value of the menu item.

Block description

Use the menu__item to control the size, state and appearance of the menu items. Use this block as a part of the menu block.

Modifiers of the block

type modifier

Acceptable value: 'link'.

Use case: BEMJSON.

Use this modifier to create the menu items implemented by the link block that must be declared in the content field in BEMJSON.

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.

Open in a new window

hovered modifier

Acceptable value: true.

Use case: – .

The modifier is added to the block automatically at the moment when you mouse it over.

Custom fields of the block

val field

Type: Number, String.

Specifies the value of the menu item.

Open in a new window

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__item

Instance methods:

isValEq(val):Boolean
description
Checks whether given value is equal to current value
parameters
val
String, Number
getVal():Any
description
Returns item value
getText():String
description
Returns item text

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