Skip to content

Menu Action Button

s-menu-action-button is a typeof button that can perform different type of actions inside menu, like toggling menu content, opening/closing menu. It accepts an argument that indicate what kind of action these button performs. Under the hood, component only dispatch a specific event e.g. MENU_EVENTS.open and root s-menu components, handle these event and perform a specific action.

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
action string Describe a button action, available value: "open", "close", "goBack" and "toggle"
disabled boolean set if button is disabled
active boolean set if button was activated

Methods

Property name Description
disable set "disable" attribute on element
enable unset "disable" attribute on element
activate set "active" attribute on element
deactivate unset "active" attribute on element

DOM events

This webcomponent listens to the following DOM events:

Example

<s-menu-action-button
    action="close"
    class="menu-action-button menu-action-button_close">
        <svg class="menu-action-button__icon">
            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
        </svg>
</s-menu-action-button>

<s-menu-action-button 
    action="close" 
    class="menu-action-button menu-action-button_close" 
    tabindex="0" 
    role="button">
        <svg class="menu-action-button__icon">
            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
        </svg>
</s-menu-action-button>

Example

These example is almost identical as before, with exception to css classes for s-menu-action-button styling added to elements.

<s-menu-action-button
    action="close">
        <svg class="menu-action-button__icon">
            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
        </svg>
</s-menu-action-button>

<s-menu-action-button 
    action="close" 
    tabindex="0" 
    role="button">
        <svg class="menu-action-button__icon">
            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-x"></use>
        </svg>
</s-menu-action-button>