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="uniq14953563335551">Swimming</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitem" id="uniq14953563335552">Skiing</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
val: 1,
content: 'Swimming'
},
{
elem: 'item',
val: 2,
content: 'Skiing'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
'item'
]
}
]
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="uniq14953563342471" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563342472" 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="uniq14953563342473" aria-checked="true">Downshifting</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
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="uniq14953563336891" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953563336892" aria-checked="false">Swimming</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
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="uniq14953563342031" 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="uniq14953563342032" aria-checked="true">Swimming</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
elems: [
'item'
]
}
]
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="uniq14953563334181" 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="uniq14953563334182" aria-disabled="true" aria-checked="false">Swimming</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
},
elems: [
'item'
]
}
]
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="uniq14953563350891" 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="uniq14953563350892" aria-checked="true">Swimming</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
elems: [
{
elem: 'item',
mods: {
disabled: true
}
}
]
}
]
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="uniq14953563343371" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563343372" aria-checked="false">Swimming</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
1
],
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
elems: [
'item'
]
}
]
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="uniq14953563340701" aria-checked="false">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563340702" aria-checked="false">Swimming</div>
</div>
{
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: 's'
},
elems: [
'item'
]
}
]
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="uniq14953563347711" 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="uniq14953563347712" aria-checked="true">Swimming</div>
</div>
{
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',
mode: 'check',
size: 'm'
},
elems: [
'item'
]
}
]
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="uniq14953563341131" 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="uniq14953563341132" aria-checked="true">Swimming</div>
</div>
{
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',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
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="uniq14953563346801" 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="uniq14953563346802" aria-checked="true">Swimming</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Skiing'
},
{
elem: 'item',
val: 2,
content: 'Swimming'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
elems: [
'item'
]
}
]
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="uniq14953563350421">Vacation at work</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitem" id="uniq14953563350422">Vacation on the couch</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
'item'
]
}
]
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="uniq14953563346321" 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="uniq14953563346322" aria-checked="true">Vacation on the couch</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
- 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="uniq14953563339841" 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="uniq14953563339842" aria-checked="true">Swimming</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
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="uniq14953563344241" 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="uniq14953563344242" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953563344243" 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="uniq14953563344244" aria-checked="false">Downshifting</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item',
'group'
]
}
]
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="uniq14953563344711" aria-checked="false">Work</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953563344712">
<div class="menu__group-title" role="presentation" id="uniq14953563344712">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="uniq14953563344713" aria-checked="true">Skiing</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953563344714" aria-checked="false">Swimming</div>
</div>
</div>
{
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'
}
]
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item',
'group'
]
}
]
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="uniq14953563348631"><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="uniq14953563348632"><a class="link link__control i-bem" data-bem='{"link":{}}' role="link" href="https://tech.yandex.ru/">tech.yandex.ru</a></div>
</div>
{
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'
}
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
{
elem: 'item',
mods: {
type: 'link'
}
}
]
},
{
block: 'link',
elems: [
{
elem: 'item',
mods: {
type: 'link'
}
}
]
}
]
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="uniq14953563338681">BH</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953563338682">BEMHTML</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
mods: {
disabled: true
},
content: 'BH'
},
{
elem: 'item',
content: 'BEMHTML'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
{
elem: 'item',
mods: {
disabled: true
}
}
]
}
]
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="uniq14953563349961" 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="uniq14953563349962" aria-checked="false">BEMHTML</div>
</div>
{
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'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]