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="uniq14953601014681">Море</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitem" id="uniq14953601014682">Горы</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Море'
},
{
block: 'menu-item',
val: 2,
content: 'Горы'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
}
},
'menu-item'
]
deps
Меню с множественным выбором (модификатор 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="uniq14953601012151" aria-checked="true">Отдых в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953601012152" 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="uniq14953601012153" aria-checked="true">Отдых на даче</div>
</div>
HTML{
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: 'Отдых на даче'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
}
},
'menu-item'
]
deps
Меню с одиночным обязательным выбором (модификатор 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="uniq14953601021261" aria-checked="true">Отдых в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953601021262" aria-checked="false">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
'menu-item'
]
deps
Меню с одиночным необязательным выбором (модификатор 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="uniq14953601020351" 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="uniq14953601020352" aria-checked="true">Отдых на море</div>
</div>
HTML{
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: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
}
},
'menu-item'
]
deps
Модификатор 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="uniq14953601006981" 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="uniq14953601006982" aria-disabled="true" aria-checked="false">Отдых на море</div>
</div>
HTML{
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: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check',
disabled: true
}
},
'menu-item'
]
deps
Модификатор 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="uniq14953601013011" 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="uniq14953601013012" aria-checked="true">Отдых на море</div>
</div>
HTML{
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: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio-check'
}
},
{
block: 'menu-item',
mods: {
disabled: true
}
}
]
deps
Модификатор 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="uniq14953601020831" aria-checked="true">Отдых в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953601020832" aria-checked="false">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
1
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
}
},
'menu-item'
]
deps
Модификатор 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="uniq14953601009931" aria-checked="false">Отдых в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953601009932" aria-checked="false">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 's'
}
},
'menu-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="uniq14953601018211" 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="uniq14953601018212" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
},
val: [
2
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'm'
}
},
'menu-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="uniq14953601006531" 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="uniq14953601006532" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
},
val: [
2
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
}
},
'menu-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="uniq14953601019591" 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="uniq14953601019592" aria-checked="true">Отдых на море</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
},
val: [
2
],
content: [
{
block: 'menu-item',
val: 1,
content: 'Отдых в горах'
},
{
block: 'menu-item',
val: 2,
content: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
mode: 'check',
size: 'xl'
}
},
'menu-item'
]
deps
Специализированные поля блока
Поле 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="uniq14953601017781">Отпуск на работе</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitem" id="uniq14953601017782">Отпуск на диване</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'Отпуск на работе'
},
{
block: 'menu-item',
val: 2,
content: 'Отпуск на диване'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
}
},
'menu-item'
]
deps
Поле 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="uniq14953601012571" 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="uniq14953601012572" aria-checked="true">Отпуск на диване</div>
</div>
HTML{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 2,
content: [
{
block: 'menu-item',
val: 1,
content: 'Отпуск на работе'
},
{
block: 'menu-item',
val: 2,
content: 'Отпуск на диване'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
'menu-item'
]
deps
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="uniq14953601015111" 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="uniq14953601015112" aria-checked="true">Отдых на море</div>
</div>
HTML{
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: 'Отдых на море'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'check'
}
},
'menu-item'
]
deps
Элементы блока
Элемент 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="uniq14953601013481" 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="uniq14953601013482" aria-checked="true">Отпуск в горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953601013483" aria-checked="false">Отпуск на море</div>
</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":4}}' role="menuitemradio" id="uniq14953601013484" aria-checked="false">Отпуск на диване</div>
</div>
HTML{
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: 'Отпуск на диване'
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
{
block: 'menu-item',
elems: [
'group'
]
}
]
deps
Специализированные поля элементов блока
Специализированное поле 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="uniq14953601009031" aria-checked="false">Работа</div>
<div class="menu__group" role="group" aria-labelledby="uniq14953601009032">
<div class="menu__group-title" role="presentation" id="uniq14953601009032">Активный отдых</div>
<div class="menu-item menu-item_checked menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953601009033" aria-checked="true">В горах</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953601009034" aria-checked="false">На море</div>
</div>
</div>
HTML{
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: 'На море'
}
]
}
]
}
BEMJSON[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
{
block: 'menu-item',
elems: [
'group'
]
}
]
deps