menu
Используется для создания различных типов меню.
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| mode |
'radio', 'radio-check', 'check' |
BEMJSON |
Тип меню. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| focused |
true |
BEMJSON, JS |
Фокус на блоке. |
| theme |
'islands' |
BEMJSON |
Стилевое оформление. |
| size |
's', 'm', 'l', 'xl' |
BEMJSON |
Размер блока. |
Специализированные поля блока
| Поле |
Тип |
Описание |
| content |
Array |
Массив пунктов меню. |
| val |
String, Number, Array |
Выбранное значение из списка. Если блоку установлен модификатор mode в значении check, выбранные значения всегда оформляются в виде массива. |
Элементы блока
| Элемент |
Способы использования |
Описание |
| group |
BEMJSON |
Визуальная группировка пунктов меню. Поле content является обязательным для элемента group. |
Специализированные поля элементов блока
| Элемент |
Поле |
Тип |
Описание |
| group |
title |
String |
Заголовок группы пунктов. |
Описание блока
Блок предоставляет возможность изменять внешний вид меню и управлять поведением вложенных независимых блоков – пунктов меню.
Реализация блока поддерживает клавиатурное управление: если блок menu находится в фокусе (установлен модификатор focused в значении true), ввод с клавиатуры одного из названий пунктов меню автоматически переводит фокус на данный пункт. Выбор происходит нажатием на кнопку Пробел или Ввод.
Модификаторы блока
Модификатор mode
Допустимые значения: 'check, 'radio', 'radio-check'.
Способ использования: BEMJSON.
В зависимости от выбранного значения модификатора mode доступны следующие типы блока:
Простой список (модификатор mode не установлен)
Без указания модификатора mode создается простой список без возможности выбрать пункт.
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="uniq14953563337341">Море</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitem" id="uniq14953563337342">Горы</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
val: 1,
content: 'Море'
},
{
elem: 'item',
val: 2,
content: 'Горы'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
'item'
]
}
]
Меню с множественным выбором (модификатор mode в значении check)
Позволяет выбрать произвольное количество пунктов меню.
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="uniq14953563335081" aria-checked="true">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563335082" aria-checked="false">Отдых на море</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemcheckbox" id="uniq14953563335083" aria-checked="true">Отдых на даче</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
1,
3
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
},
{
elem: 'item',
val: 3,
content: 'Отдых на даче'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
Меню с одиночным обязательным выбором (модификатор mode в значении radio)
Позволяет создать меню, в котором обязательно выбран ровно один пункт.
Если пункт не выбран, то по умолчанию выбирается первое значение из списка.
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="uniq14953563345891" aria-checked="true">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953563345892" aria-checked="false">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
Меню с одиночным необязательным выбором (модификатор mode в значении radio-check)
Модификатор mode в значении radio-check, так же как и модификатор mode в значении radio, позволяет выбрать ровно один пункт меню. Принципиальное отличие в том, что в значении radio-check есть возможность оставить меню без выбранных пунктов.
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="uniq14953563340271" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953563340272" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
val: 2,
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
elems: [
'item'
]
}
]
Модификатор disabled
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
Если блоку menu устанавливается модификатор disabled, то все вложенные в него блоки menu__item также становятся неактивными.
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="uniq14953563336461" aria-disabled="true" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands menu__item_disabled i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953563336462" aria-disabled="true" aria-checked="false">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
},
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
},
elems: [
'item'
]
}
]
Модификатор disabled в значении true может быть выставлен отдельным пунктам меню:
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="uniq14953563343791" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953563343792" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
val: 2,
content: [
{
elem: 'item',
mods: {
disabled: true
},
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
elems: [
{
elem: 'item',
mods: {
disabled: true
}
}
]
}
]
Модификатор focused
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Выставляется автоматически при получении блоком фокуса.
Отвечает за наличие фокуса на блоке.
{
block : 'menu',
mods : { theme : 'islands', size : 'm', mode : 'radio-check', focused : true },
val : 2,
content : [
{
elem : 'item',
val : 1,
content : 'Отдых в горах'
},
{
elem : 'item',
val : 2,
content : 'Отдых на море'
}
]
}
Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.
Модификатор theme
Допустимое значение: 'islands'.
Способ использования: BEMJSON.
Отвечает за стилевое оформление блока.
Необходимо использовать с модификатором size.
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="uniq14953563349081" aria-checked="true">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563349082" aria-checked="false">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
1
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
elems: [
'item'
]
}
]
Модификатор size
Допустимые значения: 's', 'm', 'l', 'xl'.
Способ использования: BEMJSON.
Задает размер блоку.
Необходимо использовать с модификатором theme в значении islands.
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="uniq14953563349521" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563349522" aria-checked="false">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
},
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
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="uniq14953563347241" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563347242" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
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="uniq14953563342921" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563342922" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
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="uniq14953563339391" aria-checked="false">Отдых в горах</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563339392" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
val: [
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
elems: [
'item'
]
}
]
Специализированные поля блока
Поле content
Тип: Array.
Определяет перечень пунктов меню.
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="uniq14953563337781">Отпуск на работе</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitem" id="uniq14953563337782">Отпуск на диване</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
val: 1,
content: 'Отпуск на работе'
},
{
elem: 'item',
val: 2,
content: 'Отпуск на диване'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
'item'
]
}
]
Поле val
Тип: String, Number, Array.
Определяет:
- Выбранный пункт меню. В таком случае используется тип поля
String или 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="uniq14953563345441" aria-checked="false">Отпуск на работе</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953563345442" aria-checked="true">Отпуск на диване</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
elem: 'item',
val: 1,
content: 'Отпуск на работе'
},
{
elem: 'item',
val: 2,
content: 'Отпуск на диване'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item'
]
}
]
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="uniq14953563341571" aria-checked="true">Отдых в горах</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemcheckbox" id="uniq14953563341572" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
1,
2
],
content: [
{
elem: 'item',
val: 1,
content: 'Отдых в горах'
},
{
elem: 'item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
elems: [
'item'
]
}
]
Элементы блока
Элемент group
Служит для визуальной группировки пунктов меню. Не влияет на общую логику выбора пунктов.
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="uniq14953563338211" aria-checked="false">Отпуск на работе</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="uniq14953563338212" aria-checked="true">Отпуск в горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953563338213" aria-checked="false">Отпуск на море</div>
</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":4}}' role="menuitemradio" id="uniq14953563338214" aria-checked="false">Отпуск на диване</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
elem: 'item',
val: 1,
content: 'Отпуск на работе'
},
{
elem: 'group',
content: [
{
elem: 'item',
val: 2,
content: 'Отпуск в горах'
},
{
elem: 'item',
val: 3,
content: 'Отпуск на море'
}
]
},
{
elem: 'item',
val: 4,
content: 'Отпуск на диване'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item',
'group'
]
}
]
Специализированные поля элементов блока
Специализированное поле title элемента group
Тип: String.
Определяет заголовок группы пунктов.
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="uniq14953563335991" aria-checked="false">Работа</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953563335992">
<div class="menu__group-title" role="presentation" id="uniq14953563335992">Активный отдых</div>
<div class="menu__item menu__item_checked menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":2}}' role="menuitemradio" id="uniq14953563335993" aria-checked="true">В горах</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{"val":3}}' role="menuitemradio" id="uniq14953563335994" aria-checked="false">На море</div>
</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
elem: 'item',
val: 1,
content: 'Работа'
},
{
elem: 'group',
title: 'Активный отдых',
content: [
{
elem: 'item',
val: 2,
content: 'В горах'
},
{
elem: 'item',
val: 3,
content: 'На море'
}
]
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
elems: [
'item',
'group'
]
}
]
menu__item
Используется как составная часть блока menu.
Обзор блока
Модификаторы блока
| Модификатор |
Допустимые значения |
Способы использования |
Описание |
| type |
'link' |
BEMJSON |
Пункт меню, реализованный блоком link. |
| disabled |
true |
BEMJSON, JS |
Неактивное состояние. |
| hovered |
true |
– |
Наведение курсором. |
Специализированные поля блока
| Поле |
Тип |
Описание |
| val |
Number, String |
Значение пункта меню. |
Описание блока
menu__item предоставляет возможность изменять состояние, содержимое и тип пунктов меню. Используется только в составе блока menu.
Модификаторы блока
Модификатор type
Допустимое значение: 'link'.
Способ использования: BEMJSON.
Используется для создания пунктов меню, реализованных с помощью блока link, который помещается в поле content 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_type_link menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953563348151"><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_type_link menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953563348152"><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',
elemMods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://bem.info/',
content: 'bem.info'
}
},
{
elem: 'item',
elemMods: {
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
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Модификатор отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.
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_disabled menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953563334641" aria-disabled="true">BH</div>
<div class="menu__item menu__item_theme_islands i-bem" data-bem='{"menu__item":{}}' role="menuitem" id="uniq14953563334642">BEMHTML</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
elem: 'item',
elemMods: {
disabled: true
},
content: 'BH'
},
{
elem: 'item',
content: 'BEMHTML'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
elems: [
{
elem: 'item',
mods: {
disabled: true
}
}
]
}
]
Модификатор hovered
Допустимое значение: true.
Способ использования: – .
Выставляется автоматически при наведении курсором на пункт меню.
Специализированные поля блока
Поле val
Тип: Number, String.
Определяет значение пункта меню.
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'
]
}
]