Skip to content

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 Selector for menu element that these button opens

Example

<s-menu-open-external-action-button
    targetId="header-nav">
        <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 
    targetid="header-nav"  
    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>