menu-item
Use this block as a part of the menu block.
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 block 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_type_link menu-item_theme_islands i-bem" data-bem='{"menu-item":{}}' role="menuitem" id="uniq14953601021721"><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="uniq14953601021722"><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: [
{
block: 'menu-item',
mods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://bem.info/',
content: 'bem.info'
}
},
{
block: 'menu-item',
mods: {
type: 'link'
},
content: {
block: 'link',
url: 'https://tech.yandex.ru/',
content: 'tech.yandex.ru'
}
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
}
},
{
block: 'menu-item',
mods: {
type: 'link'
}
},
'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_disabled menu-item_theme_islands i-bem" data-bem='{"menu-item":{}}' role="menuitem" id="uniq14953601022181" aria-disabled="true">BH</div>
<div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{}}' role="menuitem" id="uniq14953601022182">BEMHTML</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
},
content: [
{
block: 'menu-item',
mods: {
disabled: true
},
content: 'BH'
},
{
block: 'menu-item',
content: 'BEMHTML'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm'
}
},
{
block: 'menu-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="uniq14953601022631" 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="uniq14953601022632" aria-checked="false">BEMHTML</div>
</div>
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
},
val: 'item-1',
content: [
{
block: 'menu-item',
val: 'item-1',
content: 'BH'
},
{
block: 'menu-item',
val: 'item-2',
content: 'BEMHTML'
}
]
}
[
{
block: 'menu',
mods: {
theme: 'islands',
size: 'm',
mode: 'radio'
}
},
'menu-item'
]