Menu content

s-menu-content contains a content for specific menu layer/level.

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
contentId	string
contentLevel	string
parentContentName	string
parentContentId	string
goBackActionId	string
parentContentUrl	string

Methods

Property name	Description
show	show content
hide	hide content

DOM events

This webcomponent dispatches the following DOM events:

• menuContentConnected
• menuContentShowed
• menuContentHidden

Example

sourceoutput

<s-menu-content
    hidden
    contentLevel="1"
    parentContentName="Menu"
    contentId="menu">
        <ul>
            <li>
                 {{ menu_link({
                    link: {
                        title: 'item-1',
                        url: 'some/url/item/1'
                    },
                }) }}
            </li>

             <li>
                  {{ menu_link({
                     link: {
                         title: 'item-2',
                         url: 'some/url/item/2'
                     },
                 }) }}
             </li>
        </ul>
</s-menu-content>

<s-menu-content 
    contentlevel="1" 
    parentcontentname="Menu" 
    contentid="menu" 
    hidden="">
        <ul>
            <li>
                 <a 
                    class="js__menu-item " 
                    href="some/url/item/1" 
                    title="item-1">
                        item-1
                </a>

            </li>

             <li>
                <a 
                    class="js__menu-item " 
                    href="some/url/item/2" 
                    title="item-2">
                        item-2
                </a>
             </li>
        </ul>
</s-menu-content>