Drop-down and split buttons mixins

Magento UI library provides mixins for 2 types of drop-downs: the .lib-dropdown() mixin for drop-down and the .lib-dropdown-split() mixin for split button.

Drop-down

In Magento UI library the dropdown does not depend on the toggle tag. To toggle the drop-down, the corresponding tag must have class="action toggle".

Button tag drop-down toggle

To implement a drop-down using a button + drop-down, use the following markup:

<div class="actions dropdown example-dropdown-1"> <button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>button + dropdown</span> </button> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

Span tag drop-down toggle

To implement a drop-down using a span + drop-down, use the following markup:

<div class="example-dropdown-2"> <span class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>span + dropdown</span> </span> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

.example-dropdown-1 {
    .lib-dropdown();
}


.example-dropdown-2 {
    .lib-dropdown();
}

Drop-down variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_toggle-selector
            
-
            
~".action.toggle"
            
Selector
            
Toggle selector
        
        

            
@_options-selector
            
-
            
~"ul.dropdown"
            
Selector
            
Options selector
        
        

            
@_dropdown-actions-padding
            
@dropdown-actions__padding
            
false
            
'' | false | value
            
Drop-down toggle element padding
        
        

            
@_dropdown-list-min-width
            
@dropdown-list__min-width
            
100%
            
'' | false | value
            
Drop-down min width value
        
        

            
@_dropdown-list-width
            
@dropdown-list__width
            
false
            
'' | false | value
            
Drop-down list width value
        
        

            
@_dropdown-list-height
            
@dropdown-list__height
            
false
            
'' | false | value
            
Drop-down list height value
        
        

            
@_dropdown-list-margin-top
            
@dropdown-list__margin-top
            
4px
            
'' | false | value
            
Drop-down list margin-top value
        
        

            
Drop-down list
        
        

            
@_dropdown-list-position-top
            
@dropdown-list__position-top
            
100%
            
'' | false | value
            
Drop-down list position: top
        
        

            
@_dropdown-list-position-right
            
@dropdown-list__position-right
            
false
            
'' | false | value
            
Drop-down list position: right
        
        

            
@_dropdown-list-position-bottom
            
@dropdown-list__position-bottom
            
false
            
'' | false | value
            
Drop-down list position: bottom
        
        

            
@_dropdown-list-position-left
            
@dropdown-list__position-left
            
false
            
'' | false | value
            
Drop-down list position: left
        
        

            
@_dropdown-list-background
            
@dropdown-list__background
            
@color-white
            
'' | false | value
            
Drop-down list background
        
        

            
@_dropdown-list-border
            
@dropdown-list__border
            
1px solid #bbb
            
'' | false | value
            
Drop-down list border
        
        

            
@_dropdown-list-pointer
            
@dropdown-list__pointer
            
true
            
true | false
            
Drop-down list pointer is visible
        
        

            
@_dropdown-list-pointer-border
            
@dropdown-list-pointer__border
            
#bbb
            
'' | false | value
            
Drop-down list pointer border
        
        

            
@_dropdown-list-pointer-position
            
@dropdown-list-pointer__position
            
left
            
left | right
            
Drop-down pointer position
        
        

            
@_dropdown-list-pointer-position-top
            
@dropdown-list-pointer__position-top
            
-12px
            
value
            
Drop-down pointer top position
        
        

            
@_dropdown-list-pointer-position-left-right
            
@dropdown-list-pointer__position-left-right
            
10px
            
value
            
Drop-down pointer left or right position
        
        

            
@_dropdown-list-item-border
            
@dropdown-list-item__border
            
0
            
'' | false | value
            
Drop-down list item border
        
        

            
@_dropdown-list-item-padding
            
@dropdown-list-item__padding
            
3px @indent__xs
            
'' | false | value
            
Drop-down list item padding
        
        

            
@_dropdown-list-item-margin
            
@dropdown-list-item__margin
            
0
            
'' | false | value
            
Drop-down list item margin
        
        

            
@_dropdown-list-item-hover
            
@dropdown-list-item__hover
            
#e8e8e8
            
'' | false | value
            
Drop-down list item hovered background
        
        

            
@_dropdown-list-shadow
            
@dropdown-list__shadow
            
0 3px 3px rgba(0,0,0,.15)
            
'' | false | value
            
Drop-down list shadow
        
        

            
@_dropdown-list-z-index
            
@dropdown-list__z-index
            
100
            
'' | false | value
            
Drop-down list z-index
        
        

            
Drop-down icon
        
        

            
@_dropdown-toggle-icon-content
            
@dropdown-toggle-icon__content
            
@icon-pointer-down
            
'' | false | value
            
Drop-down toggle icon symbol code for default state
        
        

            
@_dropdown-toggle-active-icon-content
            
@dropdown-toggle-icon__active__content
            
@icon-pointer-up
            
'' | false | value
            
Drop-down toggle icon symbol code for active state
        
        

            
@_icon-font
            
@dropdown-toggle-icon__font
            
@button-icon__font
            
'' | false | value
            
Drop-down toggle icon font
        
        

            
@_icon-font-size
            
@dropdown-toggle-icon__font-size
            
@button-icon__font-size
            
'' | false | value
            
Drop-down toggle icon font size
        
        

            
@_icon-font-line-height
            
@dropdown-toggle-icon__font-line-height
            
@button-icon__line-height
            
'' | false | value
            
Drop-down toggle icon line height
        
        

            
@_icon-font-color
            
@dropdown-toggle-icon__font-color
            
@button-icon__color
            
'' | false | value
            
Drop-down toggle icon color
        
        

            
@_icon-font-color-hover
            
@dropdown-toggle-icon__font-color-hover
            
@button-icon__hover__font-color
            
'' | false | value
            
Drop-down toggle icon hovered color
        
        

            
@_icon-font-color-active
            
@dropdown-toggle-icon__font-color-active
            
@button-icon__active__font-color
            
'' | false | value
            
Drop-down toggle icon active color
        
        

            
@_icon-font-margin
            
@dropdown-toggle-icon__font-margin
            
@button-icon__margin
            
'' | false | value
            
Drop-down toggle icon margin
        
        

            
@_icon-font-position
            
@dropdown-toggle-icon__position
            
after
            
before | after
            
Drop-down toggle icon position
        
        

            
@_icon-font-vertical-align
            
@dropdown-toggle-icon__font-vertical-align
            
@button-icon__vertical-align
            
'' | false | value
            
Drop-down toggle icon vertical align
        
        

            
@_icon-font-text-hide
            
@dropdown-toggle-icon__text-hide
            
@button-icon__text-hide
            
true | false
            
Text in the tag, that contains icon, is hidden
        
    
  

Drop-down with icon customization

To customize drop-down icon symbol, specify variables for default state icon code and active state icon code:

  @_dropdown-toggle-icon-content: @icon-expand,
  @_dropdown-toggle-active-icon-content: @icon-collapse

The .lib-dropdown() mixin uses the .icon-font() mixin to display and customize toggle icon. More information about .icon-font() mixin parameters you can find at the Icons page

<div class="actions dropdown example-dropdown-3"> <span class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>span + dropdown</span> </span> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

.example-dropdown-3 {
    .lib-dropdown(
        @_dropdown-toggle-icon-content: @icon-expand,
        @_dropdown-toggle-active-icon-content: @icon-collapse,
        @_icon-font-line-height: 1,
        @_icon-font-position: before,
        @_icon-font-color: #f00,
        @_icon-font-color-hover: #f00
    );
}

Modify dropdown list styles

You can customize dropdown list style

<div class="actions dropdown example-dropdown-5"> <span class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>span + dropdown</span> </span> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

.example-dropdown-5 {
    .lib-dropdown(
        @_dropdown-list-pointer: false,
        @_dropdown-list-background: #eef1f3,
        @_dropdown-list-item-hover: #d8e3e3,
        @_dropdown-list-border: 2px solid #ced1d4,
        @_dropdown-list-item-padding: 10px,
        @_dropdown-list-item-border: 2px solid #e8eaed,
        @_dropdown-list-shadow: none,
        @_icon-font-line-height: 1
    );
}

Split button

Split button can be formed of two buttons or a link and a button. The first element (link or button) must have class="action split", the toggle element must have class="action toggle".

Split button: button+button

<div class="actions split example-dropdown-6"> <button class="action split"> <span>Spit button</span> </button> <button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>Select</span> </button> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

Split button: link+button

<div class="actions split example-dropdown-7"> <a href="#" class="action split"> <span>Spit button</span> </a> <button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>Select</span> </button> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

.example-dropdown-6 {
    .lib-dropdown-split(
        @_dropdown-split-button-border-radius-fix: true
    );
}

.split.example-dropdown-7 {
    .lib-dropdown-split();
}

Split button variables

    

        

            
Mixin variable
            
Global variable
            
Default value
            
Allowed values
            
Comment
        
        

            
@_toggle-selector
            
-
            
~".action.toggle"
            
selector
            
Split button action toggle selector
        
        

            
@_options-selector
            
-
            
~"ul.dropdown"
            
selector
            
Split button options selector
        
        

            
@_button-selector
            
-
            
~".action.split"
            
selector
            
Split button selector
        
        

            
@_dropdown-split-actions-padding
            
@dropdown-split-actions__padding
            
0 @indent__xs
            
'' | false | value
            
Split button toggle element padding
        
        

            
@_dropdown-split-button-actions-padding
            
@dropdown-split-button__actions__padding
            
false
            
'' | false | value
            
Split button actions padding
        
        

            
@_dropdown-split-toggle-actions-padding
            
@dropdown-split-toggle__actions__padding
            
4px @indent__xs
            
'' | false | value
            
Split button toggle padding
        
        

            
@_dropdown-split-toggle-position
            
@dropdown-split-toggle__position
            
right
            
'' | false | value
            
Split button toggle element position
        
        

            
Drop-down list
        
        

            
@_dropdown-split-list-min-width
            
@dropdown-split-list__min-width
            
100%
            
'' | false | value
            
Split button min width
        
        

            
@_dropdown-split-list-width
            
@dropdown-split-list__width
            
100%
            
'' | false | value
            
Split button width
        
        

            
@_dropdown-split-list-height
            
@dropdown-split-list__height
            
false
            
'' | false | value
            
Split button height
        
        

            
@_dropdown-split-list-margin-top
            
@dropdown-split-list__margin-top
            
4px
            
'' | false | value
            
Split button margin-top
        
        

            
@_dropdown-split-list-position-top
            
@dropdown-split-list__position-top
            
@dropdown-list__position-top
            
'' | false | value
            
Split button drop-down list position: top
        
        

            
@_dropdown-split-list-position-right
            
@dropdown-split-list__position-right
            
@dropdown-list__position-right
            
'' | false | value
            
Split button drop-down list position: right
        
        

            
@_dropdown-split-list-position-bottom
            
@dropdown-split-list__position-bottom
            
@dropdown-list__position-bottom
            
'' | false | value
            
Split button drop-down list position: bottom
        
        

            
@_dropdown-split-list-position-left
            
@dropdown-split-list__position-left
            
@dropdown-list__position-left
            
'' | false | value
            
Split button drop-down list position: left
        
        

            
@_dropdown-split-list-background
            
@dropdown-split-list__background
            
@dropdown-list__background
            
'' | false | value
            
Split button drop-down background
        
        

            
@_dropdown-split-list-border
            
@dropdown-split-list__border
            
@dropdown-list__border
            
'' | false | value
            
Split button drop-down border
        
        

            
@_dropdown-split-list-pointer
            
@dropdown-split-list__pointer
            
@dropdown-list__pointer
            
'' | false | value
            
Split button drop-down list pointer
        
        

            
@_dropdown-split-list-pointer-border
            
@dropdown-split-list__pointer-border
            
@dropdown-list-pointer__border
            
'' | false | value
            
Split button drop-down list pointer border
        
        

            
@_dropdown-split-button-border-radius-fix
            
@dropdown-split-button__border-radius-fix
            
false
            
true | false
            
Split button drop-down list item border
        
        

            
@_dropdown-split-list-item-border
            
@dropdown-split-list__item-border
            
@dropdown-list-item__border
            
'' | false | value
            
Split button drop-down list item border
        
        

            
@_dropdown-split-list-item-padding
            
@dropdown-split-list__item-padding
            
@dropdown-list-item__padding
            
'' | false | value
            
Split button drop-down list item padding
        
        

            
@_dropdown-split-list-item-margin
            
@dropdown-split-list__item-margin
            
@dropdown-list-item__margin
            
'' | false | value
            
Split button drop-down list item margin
        
        

            
@_dropdown-split-list-item-hover
            
@dropdown-split-list__item-hover
            
@dropdown-list-item__hover
            
'' | false | value
            
Split button drop-down list item hovered background
        
        

            
@_dropdown-split-list-pointer-position
            
@dropdown-split-list__pointer-position
            
right
            
left | right
            
Split button drop-down list pointer position
        
        

            
@_dropdown-split-list-pointer-position-top
            
@dropdown-split-list__pointer-position-top
            
-12px
            
'' | false | value
            
Split button drop-down list pointer position top
        
        

            
@_dropdown-split-list-pointer-position-left-right
            
@dropdown-split-list__pointer-position-left-right
            
10px
            
'' | false | value
            
Split button drop-down list pointer left or right position
        
        

            
@_dropdown-split-list-shadow
            
@dropdown-split-list__shadow
            
@dropdown-list__shadow
            
'' | false | value
            
Split button drop-down list shadow
        
        

            
@_dropdown-split-list-z-index
            
@dropdown-split-list__z-index
            
@dropdown-list__z-index
            
'' | false | value
            
Split button drop-down list z-index
        
        

            
Dropdown icon
        
        

            
@_dropdown-split-toggle-icon-content
            
@dropdown-split-toggle-icon__content
            
@dropdown-toggle-icon__content
            
'' | false | value
            
Split button drop-down toggle icon - default state
        
        

            
@_dropdown-split-toggle-active-icon-content
            
@dropdown-split-toggle-icon__active__content
            
@dropdown-toggle-icon__active__content
            
'' | false | value
            
Split button drop-down toggle icon - active state
        
        

            
@_icon-font
            
@dropdown-split-toggle-icon__font
            
@button-icon__font
            
'' | false | value
            
Split button drop-down toggle icon font
        
        

            
@_icon-font-size
            
@dropdown-split-toggle-icon__font-size
            
@button-icon__font-size
            
'' | false | value
            
Split button drop-down toggle icon font size
        
        

            
@_icon-font-line-height
            
@dropdown-split-toggle-icon__font-line-height
            
@button-icon__line-height
            
'' | false | value
            
Split button drop-down toggle icon line height
        
        

            
@_icon-font-color
            
@dropdown-split-toggle-icon__font-color
            
@button-icon__color
            
'' | false | value
            
Split button drop-down toggle icon color
        
        

            
@_icon-font-color-hover
            
@dropdown-split-toggle-icon__font-color-hover
            
@button-icon__hover__font-color
            
'' | false | value
            
Split button drop-down toggle icon hovered color
        
        

            
@_icon-font-color-active
            
@dropdown-split-toggle-icon__font-color-active
            
@button-icon__active__font-color
            
'' | false | value
            
Split button drop-down toggle icon active color
        
        

            
@_icon-font-margin
            
@dropdown-split-toggle-icon__font-margin
            
@button-icon__margin
            
'' | false | value
            
Split button drop-down toggle icon margin
        
        

            
@_icon-font-position
            
@dropdown-split-toggle-icon__position
            
after
            
before | after
            
Split button drop-down toggle icon position
        
        

            
@_icon-font-vertical-align
            
@dropdown-split-toggle-icon__font-vertical-align
            
@button-icon__vertical-align
            
'' | false | value
            
Split button drop-down toggle icon vertical align
        
        

            
@_icon-font-text-hide
            
@dropdown-split-toggle-icon__text-hide
            
@button-icon__text-hide
            
true | false
            
The text in the toggle tag is hidden
        
    
  

Split button - button styling

Split buttons can be customized the same way as all types of buttons from Magento UI library.

Regular button:

<div class="actions split example-dropdown-8"> <button class="action split"> <span>Spit button</span> </button> <button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>Select</span> </button> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

Big button:

<div class="actions split example-dropdown-9"> <button class="action split"> <span>Spit button</span> </button> <button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>Select</span> </button> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

Small button:

<div class="actions split example-dropdown-10"> <button class="action split"> <span>Spit button</span> </button> <button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>Select</span> </button> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

.example-dropdown-8 {
    .lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}

.example-dropdown-9 {
    .action.split,
    .action.toggle {
        .lib-button-l();
    }
    .lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}

.example-dropdown-10 {
    .action.split,
    .action.toggle {
        .lib-button-s();
    }
    .lib-dropdown-split(@_dropdown-split-button-border-radius-fix: true);
}

Split button icon customization

Mixin .lib-dropdown-split() uses .icon-font() mixin to customize icon. More information about .icon-font() parameters you can find at Icons page

<div class="actions split example-dropdown-11"> <button class="action split"> <span>Spit button</span> </button> <button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>Select</span> </button> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

.example-dropdown-11 {
    .lib-dropdown-split(
        @_dropdown-split-toggle-position: left,
        @_dropdown-split-button-border-radius-fix: true,
        @_dropdown-split-toggle-icon-content: @icon-expand,
        @_dropdown-split-toggle-active-icon-content: @icon-collapse,
        @_icon-font-position: before,
        @_icon-font-color: #f00,
        @_icon-font-color-hover: #f00
    );
}

Split button drop-down list customization

You can customize drop-down list style

<div class="actions split example-dropdown-12"> <button class="action split"> <span>Spit button</span> </button> <button class="action toggle" data-mage-init='{"dropdown":{}}' data-toggle="dropdown" aria-haspopup="true"> <span>Select</span> </button> <ul class="dropdown"> <li> <span class="item">One</span> </li> <li> <span class="item">Two</span> </li> <li> <span class="item">Three</span> </li> </ul> </div>

.example-dropdown-12 {
    .lib-dropdown-split(
        @_dropdown-split-list-pointer: false,
        @_dropdown-split-list-background: #eef1f3,
        @_dropdown-split-list-item-hover: #d8e3e3,
        @_dropdown-split-list-border: 2px solid #ced1d4,
        @_dropdown-split-list-item-padding: 10px,
        @_dropdown-split-list-item-border: 2px solid #e8eaed,
        @_dropdown-split-list-shadow: none,
        @_dropdown-split-button-border-radius-fix: true
    );
}