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 menu-item blocks.

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)
multiple-choice list (mode modifier with check value)
mandatory single-choice list (mode modifier with radio value)
optional single-choice list (mode modifier with radio-check 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="uniq14953600619691">Swimming</div>
    <div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitem" id="uniq14953600619692">Skiing</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Swimming'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Skiing'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    },
    'menu-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="uniq14953600616741" aria-checked="true">Skiing</div>
    <div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953600616742" 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="uniq14953600616743" aria-checked="true">Downshifting</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'check'
    },
    val: [
        1,
        3
    ],
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        },
        {
            block: 'menu-item',
            val: 3,
            content: 'Downshifting'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'check'
        }
    },
    'menu-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="uniq14953600615691" aria-checked="true">Skiing</div>
    <div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemradio" id="uniq14953600615692" aria-checked="false">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'radio'
    },
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'radio'
        }
    },
    'menu-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="uniq14953600624341" 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="uniq14953600624342" aria-checked="true">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'radio-check'
    },
    val: 2,
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'radio-check'
        }
    },
    'menu-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="uniq14953600617611" 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="uniq14953600617612" aria-disabled="true" aria-checked="false">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'radio-check',
        disabled: true
    },
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'radio-check',
            disabled: true
        }
    },
    'menu-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_disabled menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemradio" id="uniq14953600622151" aria-disabled="true" 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="uniq14953600622152" aria-checked="true">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'radio-check'
    },
    val: 2,
    content: [
        {
            block: 'menu-item',
            mods: {
                disabled: true
            },
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'radio-check'
        }
    },
    {
        block: 'menu-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 : [
        {
            block : 'menu-item',
            val : 1,
            content : 'Skiing'
        },
        {
            block : 'menu-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="uniq14953600626891" aria-checked="true">Skiing</div>
    <div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953600626892" aria-checked="false">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        mode: 'check',
        size: 'm'
    },
    val: [
        1
    ],
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            mode: 'check',
            size: 'm'
        }
    },
    'menu-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.

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="uniq14953600618431" aria-checked="false">Skiing</div>
    <div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitemcheckbox" id="uniq14953600618432" aria-checked="false">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        mode: 'check',
        size: 's'
    },
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            mode: 'check',
            size: 's'
        }
    },
    'menu-item'
]

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="uniq14953600619261" 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="uniq14953600619262" aria-checked="true">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        mode: 'check',
        size: 'm'
    },
    val: [
        2
    ],
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            mode: 'check',
            size: 'm'
        }
    },
    '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_theme_islands i-bem" data-bem='{"menu-item":{"val":1}}' role="menuitemcheckbox" id="uniq14953600616091" 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="uniq14953600616092" aria-checked="true">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'check'
    },
    val: [
        2
    ],
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'check'
        }
    },
    'menu-item'
]

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="uniq14953600618841" 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="uniq14953600618842" aria-checked="true">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        mode: 'check',
        size: 'xl'
    },
    val: [
        2
    ],
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            mode: 'check',
            size: 'xl'
        }
    },
    'menu-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="uniq14953600624781">Vacation at work</div>
    <div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":2}}' role="menuitem" id="uniq14953600624782">Vacation on the couch</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm'
    },
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Vacation at work'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Vacation on the couch'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm'
        }
    },
    'menu-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="uniq14953600623891" 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="uniq14953600623892" aria-checked="true">Vacation on the couch</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'radio'
    },
    val: 2,
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Vacation at work'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Vacation on the couch'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'radio'
        }
    },
    'menu-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="uniq14953600623461" 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="uniq14953600623462" aria-checked="true">Swimming</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'check'
    },
    val: [
        1,
        2
    ],
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Skiing'
        },
        {
            block: 'menu-item',
            val: 2,
            content: 'Swimming'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'check'
        }
    },
    'menu-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="uniq14953600625221" 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="uniq14953600625222" aria-checked="true">Skiing</div>
        <div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953600625223" 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="uniq14953600625224" aria-checked="false">Downshifting</div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'radio'
    },
    val: 2,
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Work'
        },
        {
            elem: 'group',
            content: [
                {
                    block: 'menu-item',
                    val: 2,
                    content: 'Skiing'
                },
                {
                    block: 'menu-item',
                    val: 3,
                    content: 'Swimming'
                }
            ]
        },
        {
            block: 'menu-item',
            val: 4,
            content: 'Downshifting'
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'radio'
        }
    },
    {
        block: 'menu-item',
        elems: [
            '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="uniq14953600626471" aria-checked="false">Work</div>
    <div class="menu__group" role="group" aria-labelledby="uniq14953600626472">
        <div class="menu__group-title" role="presentation" id="uniq14953600626472">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="uniq14953600626473" aria-checked="true">Skiing</div>
        <div class="menu-item menu-item_theme_islands i-bem" data-bem='{"menu-item":{"val":3}}' role="menuitemradio" id="uniq14953600626474" aria-checked="false">Swimming</div>
    </div>
</div>

{
    block: 'menu',
    mods: {
        theme: 'islands',
        size: 'm',
        mode: 'radio'
    },
    val: 2,
    content: [
        {
            block: 'menu-item',
            val: 1,
            content: 'Work'
        },
        {
            elem: 'group',
            title: 'Outdoor activity',
            content: [
                {
                    block: 'menu-item',
                    val: 2,
                    content: 'Skiing'
                },
                {
                    block: 'menu-item',
                    val: 3,
                    content: 'Swimming'
                }
            ]
        }
    ]
}

[
    {
        block: 'menu',
        mods: {
            theme: 'islands',
            size: 'm',
            mode: 'radio'
        }
    },
    {
        block: 'menu-item',
        elems: [
            'group'
        ]
    }
]

Instance methods:

getItems
setContent
searchItemByKeyboardEvent
_onFocus
_onBlur

menu_mode

Instance methods:

getVal
_getVal
setVal
_setVal
setContent

menu_mode_check

Instance methods:

_getVal
_setVal
_onItemClick

menu_mode_radio-check

Instance methods:

_getVal
_setVal
_onItemClick

menu_mode_radio

Instance methods:

_getVal
_setVal
_onItemClick

Block menu

Augments:control

Instance methods:

getItems():menu-item

description

Returns items

setContent(content):menu

description

Sets content

parameters

content

String, jQuery

searchItemByKeyboardEvent(e):menu-item

description

Search menu item by keyboard event

parameters

jQuery.Event

_onFocus()override

_onBlur()override

menu_mode

Instance methods:

getVal():Any

description

Returns menu value

_getVal():Anyprotectedabstract

setVal(val):menu

description

Sets menu value

parameters

val

_setVal(val):Booleanprotectedabstract

parameters

val

setContent()override

description

Sets content

menu_mode_check

Instance methods:

_getVal()override

_setVal(vals)override

parameters

vals

Array

_onItemClick()override

menu_mode_radio-check

Instance methods:

_getVal()override

_setVal()override

_onItemClick()override

menu_mode_radio

Instance methods:

_getVal()override

_setVal()override

_onItemClick()override

Methodology

Technology

Toolbox

Libraries

Tutorials

menu

Overview

Modifiers of the block

Custom fields of the block

Elements of the block

Custom fields of the block elements

Block description

Modifiers of the block

`mode` modifier

Basic list (`mode` modifier is not specified)

Multiple-choice list (`mode` modifier with `check` value)

Mandatory single-choice list (`mode` modifier with `radio` value)

Optional single-choice list (`mode` modifier with `radio-check` value)

`disabled` modifier

`focused` modifier

`theme` modifier

`size` modifier

Custom fields of the block

`content` field

`val` field

Elements of the block

`group` element

Custom fields of the block elements

`title` field of `group` element

Block menu

Instance methods:

menu_mode

Instance methods:

menu_mode_check

Instance methods:

menu_mode_radio-check

Instance methods:

menu_mode_radio

Instance methods:

Send feedback

Methodology

Technology

Toolbox

Libraries

Tutorials

menu

Overview

Modifiers of the block

Custom fields of the block

Elements of the block

Custom fields of the block elements

Block description

Modifiers of the block

mode modifier

Basic list (mode modifier is not specified)

Multiple-choice list (mode modifier with check value)

Mandatory single-choice list (mode modifier with radio value)

Optional single-choice list (mode modifier with radio-check value)

disabled modifier

focused modifier

theme modifier

size modifier

Custom fields of the block

content field

val field

Elements of the block

group element

Custom fields of the block elements

title field of group element

Block menu

Instance methods:

menu_mode

Instance methods:

menu_mode_check

Instance methods:

menu_mode_radio-check

Instance methods:

menu_mode_radio

Instance methods:

`mode` modifier

Basic list (`mode` modifier is not specified)

Multiple-choice list (`mode` modifier with `check` value)

Mandatory single-choice list (`mode` modifier with `radio` value)

Optional single-choice list (`mode` modifier with `radio-check` value)

`disabled` modifier

`focused` modifier

`theme` modifier

`size` modifier

`content` field

`val` field

`group` element

`title` field of `group` element