Menu Open External Action Button

s-menu-open-external-action-button is used for opening a menu "outside" of s-menu. It can be used anywhere in a document, unlike s-menu-action-button which has to be places inside s-menu markup.

Note: s- stands for storefront. This is naming convention used for every webcomponent as they must have a two-part name.

Attributes

Attribute name	Type	Default	Description
selector	string	s-menu	Selector for the menu element that this button opens.

Example

sourceoutput

<s-menu-open-external-action-button
    lazy="s-menu">
        <div class="labeled-icon">
            <svg class="labeled-icon__icon">
                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-menu"></use>
            </svg>

            <div class="labeled-icon__signature">menu</div>
        </div>
</s-menu-open-external-action-button>

<s-menu-open-external-action-button 
    lazy="s-menu"  
    tabindex="0" 
    role="button" 
    aria-haspopup="menu">
        <div class="labeled-icon">
            <svg class="labeled-icon__icon">
                <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-menu"></use>
            </svg>
            <div class="labeled-icon__signature">menu</div>
        </div>
</s-menu-open-external-action-button>