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<div class="menu menu_theme_islands menu_size_m menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitem" id="uniq14953582058541">Swimming</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitem" id="uniq14953582058542">Skiing</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
val: 1,
content: 'Swimming'
},
{
elem: 'item',
val: 2,
content: 'Skiing'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
'item'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953582068431" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582068432" aria-checked="false">Swimming</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953582068433" aria-checked="true">Downshifting</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953582060821" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582060822" aria-checked="false">Swimming</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu_mode_radio-check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953582067721" aria-checked="false">Skiing</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582067722" aria-checked="true">Swimming</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
elems: [
'item'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu_mode_radio-check menu_disabled menu__control i-bem" data-bem='{"menu":{"tabIndex":0}}' role="menu" aria-disabled="true">
<div class="menu__item menu__item_theme_islands menu__item_disabled i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953582020911" aria-disabled="true" aria-checked="false">Skiing</div>
<div class="menu__item menu__item_theme_islands menu__item_disabled i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582020912" aria-disabled="true" aria-checked="false">Swimming</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
},
elems: [
'item'
]
}
]
deps
The disabled
modifier with the true
value could be set to a separate menu items:
Open in a new window<div class="menu menu_theme_islands menu_size_m menu_mode_radio-check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953582080361" aria-checked="false">Skiing</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582080362" aria-checked="true">Swimming</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
elems: [
{
elem: 'item',
mods: {
disabled: true
}
}
]
}
]
deps
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<div class="menu menu_theme_islands menu_mode_check menu_size_m menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953582069751" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582069752" aria-checked="false">Swimming</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
1
],
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
elems: [
'item'
]
}
]
deps
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<div class="menu menu_theme_islands menu_mode_check menu_size_s menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953582065901" aria-checked="false">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582065902" aria-checked="false">Swimming</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
},
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
},
elems: [
'item'
]
}
]
deps
m
Open in a new window<div class="menu menu_theme_islands menu_mode_check menu_size_m menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953582076371" aria-checked="false">Skiing</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582076372" aria-checked="true">Swimming</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
elems: [
'item'
]
}
]
deps
l
Open in a new window<div class="menu menu_theme_islands menu_size_m menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953582066471" aria-checked="false">Skiing</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582066472" aria-checked="true">Swimming</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
deps
xl
Open in a new window<div class="menu menu_theme_islands menu_mode_check menu_size_xl menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953582074811" aria-checked="false">Skiing</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582074812" aria-checked="true">Swimming</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
elems: [
'item'
]
}
]
deps
Custom fields of the block
content
field
Type: Array
.
Specifies the list of the menu items.
Open in a new window<div class="menu menu_theme_islands menu_size_m menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitem" id="uniq14953582079821">Vacation at work</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitem" id="uniq14953582079822">Vacation on the couch</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
'item'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953582074101" aria-checked="false">Vacation at work</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582074102" aria-checked="true">Vacation on the couch</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
deps
- 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<div class="menu menu_theme_islands menu_size_m menu_mode_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemcheckbox" id="uniq14953582064551" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953582064552" aria-checked="true">Swimming</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953582071181" aria-checked="false">Work</div>
<div class="menu__group" role="group">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582071182" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953582071183" aria-checked="false">Swimming</div>
</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="menuitemradio" id="uniq14953582071184" aria-checked="false">Downshifting</div>
</div>
HTML{
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'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item',
'group'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":1}}' role="menuitemradio" id="uniq14953582071841" aria-checked="false">Work</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953582071842">
<div class="menu__group-title" role="presentation" id="uniq14953582071842">Outdoor activity</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953582071843" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953582071844" aria-checked="false">Swimming</div>
</div>
</div>
HTML{
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'
}
]
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item',
'group'
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953582077471"><a class="link link__control i-bem" data-bem='{"link":{}}' role="link" href="https://bem.info/">bem.info</a></div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953582077472"><a class="link link__control i-bem" data-bem='{"link":{}}' role="link" href="https://tech.yandex.ru/">tech.yandex.ru</a></div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
mods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://bem.info/',
content: 'bem.info'
}
},
{
elem: 'item',
mods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://tech.yandex.ru/',
content: 'tech.yandex.ru'
}
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
{
elem: 'item',
mods: {
type: 'link'
}
}
]
},
{
block: 'link',
elems: [
{
elem: 'item',
mods: {
type: 'link'
}
}
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953582063431">BH</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953582063432">BEMHTML</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
mods: {
disabled: true
},
content: 'BH'
},
{
elem: 'item',
content: 'BEMHTML'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
{
elem: 'item',
mods: {
disabled: true
}
}
]
}
]
deps
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<div class="menu menu_theme_islands menu_size_m menu_mode_radio menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":"item-1"}}' role="menuitemradio" id="uniq14953582079281" aria-checked="true">BH</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":"item-2"}}' role="menuitemradio" id="uniq14953582079282" aria-checked="false">BEMHTML</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 'item-1',
content: [
{
elem: 'item',
val: 'item-1',
content: 'BH'
},
{
elem: 'item',
val: 'item-2',
content: 'BEMHTML'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
deps