dropdown
A composite block that consists of a control component (for example, a button or a link) that triggers a popup.
Overview
Modifiers of the block
| Modifier |
Acceptable values |
Use cases |
Description |
| switcher |
'link', 'button' |
BEMJSON |
The type of the control component. A modifier is required. |
| disabled |
true |
BEMJSON, JS |
The disabled state. |
| opened |
true |
JS |
Displaying the popup on a page. |
| theme |
'islands' |
BEMJSON |
A custom design. |
| size |
's', 'm', 'l', 'xl' |
BEMJSON |
The size of the control component. Use sizes only when the theme modifier is set to islands. |
Custom fields of the block
Block description
Use the dropdown block to create different dropdown types, control their state, behavior and appearance on a page.
Modifiers of the block
switcher modifier
Acceptable values: link, button.
Use case: BEMJSON.
The switcher modifier specifies the type of the control component:
Link as control component (switcher modifier with link value)
Use to set the link block as the control component.
Clicking on the link triggers the popup block.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581984011"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">New sales</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: 'New sales',
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Button as control component (switcher modifier with button value)
Use to set the button block as the control component.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581970601"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">New sales</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: 'New sales',
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
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="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581975661"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><span class="link link_pseudo link_theme_islands link_disabled link__control i-bem" data-bem='{"link":{}}' role="button" aria-disabled="true">New sales</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm',
disabled: true
},
switcher: 'New sales',
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm',
disabled: true
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m dropdown_disabled i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581978091"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><button class="button button_size_m button_theme_islands button_disabled button__control i-bem" data-bem='{"button":{}}' role="button" type="button" disabled="disabled"><span class="button__text">New sales</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm',
disabled: true
},
switcher: 'New sales',
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm',
disabled: true
}
}
]
opened modifier
Acceptable value: true.
Use case: JS.
The modifier is applied to the block automatically when the popup opens.
theme modifier
Acceptable value: islands.
Use cases: BEMJSON.
The modifier gives the block a custom design.
The islands theme requires the size modifier.
The modifier can be applied to:
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581984011"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">New sales</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: 'New sales',
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581970601"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">New sales</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: 'New sales',
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
- The control component (if the switcher field contains BEMJSON code of the link or button blocks).
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581971171"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><span class="link link_pseudo link_theme_islands link_size_m link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">New sales</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'link',
mods: {
pseudo: true,
theme: 'islands',
size: 'm'
},
content: 'New sales'
},
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581971811"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">New sales</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'button',
mods: {
togglable: 'check',
theme: 'islands',
size: 'm'
},
text: 'New sales'
},
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
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.
The modifier can be applied to:
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581970601"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><button class="button button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">New sales</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: 'New sales',
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
- The control component (if the switcher field contains BEMJSON code of the link or button blocks).
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581974951"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><button class="button button_togglable_check button_theme_islands button_size_m button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">New sales</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'button',
mods: {
togglable: 'check',
theme: 'islands',
size: 'm'
},
text: 'New sales'
},
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
Custom fields of the block
switcher field
Type: String, BEMJSON.
Specifies the content of the control component.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581977441"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">New sales</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'link',
mods: {
pseudo: true
},
content: 'New sales'
},
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581980401"}}' aria-hidden="true">30% discount for a new collection. Enter a promotional code to start shopping.</div><button class="button button_togglable_check button_size_m button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button" aria-pressed="false"><span class="button__text">New sales</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
},
switcher: {
block: 'button',
mods: {
togglable: 'check'
},
text: 'New sales'
},
popup: '30% discount for a new collection. Enter a promotional code to start shopping.'
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'm'
}
}
]
popup field
Type: String, BEMJSON.
Specifies the content of the popup.
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_link dropdown_theme_islands dropdown_size_m i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581983471"}}' aria-hidden="true">Скидка 30%</div><span class="link link_pseudo link_theme_islands link__control i-bem" data-bem='{"link":{}}' role="button" tabindex="0">New sales</span>
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
},
switcher: 'New sales',
popup: 'Скидка 30%'
}
[
{
block: 'dropdown',
mods: {
switcher: 'link',
theme: 'islands',
size: 'm'
}
}
]
Open in a new window<div class="popup popup_theme_islands popup_autoclosable popup_target_anchor dropdown dropdown_switcher_button dropdown_theme_islands dropdown_size_xl i-bem" data-bem='{"popup":{},"dropdown":{"id":"uniq14953581973271"}}' aria-hidden="true">
<div class="menu menu_theme_islands menu_size_xl menu_select_check menu__control i-bem" data-bem='{"menu":{}}' role="menu" tabindex="0">
<div class="menu-item">First item</div>
<div class="menu-item">Second item</div>
</div>
</div><button class="button button_size_xl button_theme_islands button__control i-bem" data-bem='{"button":{}}' role="button" type="button"><span class="button__text">Dropdown list</span></button>
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'xl'
},
switcher: 'Dropdown list',
popup: {
block: 'menu',
mods: {
theme: 'islands',
size: 'xl',
select: 'check'
},
content: [
{
block: 'menu-item',
val: 1,
content: 'First item'
},
{
block: 'menu-item',
val: 2,
content: 'Second item'
}
]
}
}
[
{
block: 'dropdown',
mods: {
switcher: 'button',
theme: 'islands',
size: 'xl'
}
}
]