# 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
        );
    }