Dropdown

About

Dropdown — is a JS widget component that shows dropdown content below trigger.

Source code:

Initialization

XML layout update initialization:

<!-- Icon dropdown -->
<block class="Swissup\Breeze\Block\Theme\Dropdown" name="custom-dropdown">
    <arguments>
        <argument name="title" xsi:type="string" translate="true">Dropdown</argument>
        <!-- <argument name="sr_only" xsi:type="boolean">true</argument> -->
        <!-- <argument name="icon" xsi:type="string"><![CDATA[<svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>]]></argument> -->
        <!-- <argument name="css_class" xsi:type="string">no-chevron dropdown-lg</argument> -->
        <argument name="css_class" xsi:type="string">dropdown-lg</argument>
        <argument name="is_dialog" xsi:type="boolean">true</argument>
    </arguments>
    <block class="Magento\Cms\Block\Block" name="custom-dropdown.content">
        <arguments>
            <argument name="block_id" xsi:type="string">header_panel_info</argument>
        </arguments>
    </block>
</block>

We use initialization via XML layout for header actions.

HTML initialization:

<div class="actions dropdown options switcher-options" style="display:inline-block">
    <div class="action toggle switcher-trigger" data-mage-init='{"dropdown":{"dialog":true}}'>
        <strong><span>Title</span></strong>
    </div>
    <div class="dropdown switcher-dropdown" data-target="dropdown">
        Content
    </div>
</div>

JS initialization:

$('.selector').dropdown();

Options

$('.selector').dropdown({
    parent: null,
    activeClass: 'active',
    dialog: false, // if true - do not close dropdown when clicking inside
    menu: '[data-target="dropdown"]'
});

Methods

var dropdown = $(el).dropdown('instance');

dropdown.open();
dropdown.close();
dropdown.toggle();

Events

$(document).on('beforeOpen', (e, data) => {});
$(document).on('beforeClose', (e, data) => {});

Styles

@dropdown__border-color: @divider__color;
@dropdown__border: 1px solid @dropdown__border-color;
@dropdown__border-radius: false;
@dropdown__shadow: @shadow-lg;

@dropdown-item__border-radius: @dropdown__border-radius;
@dropdown-item__padding: @1 @2;
@dropdown-item__hover__color: false;
@dropdown-item__hover__background: @divider__color;
@dropdown-item__hover__background-alpha: .05;