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="uniq14953610694761">Море</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitem" id="uniq14953610694762">Горы</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Море'
},
{
block: 'menu-item',
val: 2,
content: 'Горы'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
}
},
'menu-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="uniq14953610692221" aria-checked="true">Отдых в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953610692222" 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="uniq14953610692223" aria-checked="true">Отдых на даче</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
1,
3
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
},
{
block: 'menu-item',
val: 3,
content: 'Отдых на даче'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
}
},
'menu-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="uniq14953610702321" aria-checked="true">Отдых в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610702322" aria-checked="false">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
'menu-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="uniq14953610701031" 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="uniq14953610701032" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
val: 2,
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
}
},
'menu-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="uniq14953610666121" 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="uniq14953610666122" aria-disabled="true" aria-checked="false">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
}
},
'menu-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_disabled menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953610693261" aria-disabled="true" 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="uniq14953610693262" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
},
val: 2,
content: [
{
block: 'menu-item',
mods: {
disabled: true
},
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
}
},
{
block: 'menu-item',
mods: {
disabled: true
}
}
]
Модификатор focused
Допустимое значение: true.
Способы использования: BEMJSON, JS.
Выставляется автоматически при получении блоком фокуса.
Отвечает за наличие фокуса на блоке.
{
block : 'menu',
mods : { theme : 'islands', size : 'm', mode : 'radio-check', focused : true },
val : 2,
content : [
{
block : 'menu-item',
val : 1,
content : 'Отдых в горах'
},
{
block : 'menu-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="uniq14953610701501" aria-checked="true">Отдых в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953610701502" aria-checked="false">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
1
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
}
},
'menu-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="uniq14953610689771" aria-checked="false">Отдых в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953610689772" aria-checked="false">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
}
},
'menu-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="uniq14953610699071" 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="uniq14953610699072" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
2
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
}
},
'menu-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="uniq14953610665601" 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="uniq14953610665602" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
2
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
}
},
'menu-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="uniq14953610700541" 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="uniq14953610700542" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
val: [
2
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
}
},
'menu-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="uniq14953610698621">Отпуск на работе</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitem" id="uniq14953610698622">Отпуск на диване</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Отпуск на работе'
},
{
block: 'menu-item',
val: 2,
content: 'Отпуск на диване'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
}
},
'menu-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="uniq14953610692721" 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="uniq14953610692722" aria-checked="true">Отпуск на диване</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
block: 'menu-item',
val: 1,
content: 'Отпуск на работе'
},
{
block: 'menu-item',
val: 2,
content: 'Отпуск на диване'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
'menu-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="uniq14953610695591" 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="uniq14953610695592" aria-checked="true">Отдых на море</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
1,
2
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
}
},
'menu-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="uniq14953610693771" 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="uniq14953610693772" aria-checked="true">Отпуск в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610693773" aria-checked="false">Отпуск на море</div>
</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":4}}' role="menuitemradio" id="uniq14953610693774" aria-checked="false">Отпуск на диване</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
block: 'menu-item',
val: 1,
content: 'Отпуск на работе'
},
{
elem: 'group',
content: [
{
block: 'menu-item',
val: 2,
content: 'Отпуск в горах'
},
{
block: 'menu-item',
val: 3,
content: 'Отпуск на море'
}
]
},
{
block: 'menu-item',
val: 4,
content: 'Отпуск на диване'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
{
block: 'menu-item',
elems: [
'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="uniq14953610687951" aria-checked="false">Работа</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953610687952">
<div class="menu__group-title" role="presentation" id="uniq14953610687952">Активный отдых</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953610687953" aria-checked="true">В горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953610687954" aria-checked="false">На море</div>
</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
block: 'menu-item',
val: 1,
content: 'Работа'
},
{
elem: 'group',
title: 'Активный отдых',
content: [
{
block: 'menu-item',
val: 2,
content: 'В горах'
},
{
block: 'menu-item',
val: 3,
content: 'На море'
}
]
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
{
block: 'menu-item',
elems: [
'group'
]
}
]