Skip to content

Menu Toggle Action Button

s-menu-toggle-action-button is used for toggling s-menu-content. Under the hood it uses s-menu-action-button with action value set to "toggle".

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
toggleId string id that indicates which s-menu-content these button toggles. This is a value of contentId attribute
contentLevel string level indentation
parentContentId string id of parent s-menu-content

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 dispatches the following DOM events:

Example

<s-menu-toggle-action-button
    class="js__menu-item js__menu-toggle-action-button menu-action-button menu-action-button_toggle"
    aria-controls="menu-1"
    aria-expanded="false"
    toggleId="menu-1"
    contentLevel="1">
        Menu
</s-menu-toggle-action-button>

<s-menu-toggle-action-button 
    class="js__menu-item menu-action-button menu-action-button_toggle js__menu-toggle-action-button" 
    aria-controls="menu-1" 
    aria-expanded="false" 
    toggleid="menu-1" 
    contentlevel="1" 
    tabindex="0" 
    role="button">
        Menu
</s-menu-toggle-action-button>

Example

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

Note: that some classes with prefix js__ are still present, they are necessary to work property in some cases with s-menu

<s-menu-toggle-action-button
    class="js__menu-item js__menu-toggle-action-button" 
    aria-controls="menu-1"
    aria-expanded="false"
    toggleId="menu-1"
    contentLevel="1">
        Menu
</s-menu-toggle-action-button>

<s-menu-toggle-action-button 
    class="js__menu-item js__menu-toggle-action-button" 
    aria-controls="menu-1" 
    aria-expanded="false" 
    toggleid="menu-1" 
    contentlevel="1" 
    tabindex="0" 
    role="button">
        Menu
</s-menu-toggle-action-button>

Example with twig macro

Instead, explicit writing a html for element, we can use a predefined macro

{{ menu_toggle_action_button({
    toggleId: "menu-1",
    level: 1,
    name: "menu-1"
}) }}

<s-menu-toggle-action-button 
    class="js__menu-item menu-action-button menu-action-button_toggle js__menu-toggle-action-button" 
    aria-controls="menu-1" 
    aria-expanded="false" 
    toggleid="menu-1" 
    contentlevel="1" 
    tabindex="0" 
    role="button">
        menu-1

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