Menu¶

Menu component is used by main-navigation module. The root component is <s-menu>. For specific menu parts we have a specialized component such as:

The root element has a menu class.

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	Description
viewController	IMenuViewController	Lit controller that take cares of menu view management, eg. showing, hiding, swapping content
isOpened	boolean

Methods¶

Property name	Description
open	open menu, on desktop shows a topbar(headerlinks), on mobile it opens a whole menu layer
close	close menu, on desktop close all layers expect a topbar(headerlinks), on mobile close all layers

DOM events¶

This webcomponent listens to the following DOM events:

In theory, an empty <s-menu> tag is valid. However typically we want to insert some content inside navigation. In order to accomplish this, we utilize s-menu-content for menu items and a toggle button for toggling content views.

In these example we used menu_toggle_action_button macro to render a toggle button however we could use <s-menu-toggle-action-button></s-menu-toggle-action-button> explicit as well.

sourceoutput

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

    <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>

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

            <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>

    <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>
</s-menu>

Example with additional CSS classes¶

This example is almost identical as before, with exception to css classes for main-navigation styling are added to elements.

Note: Some elements have additional CSS classes with js__ prefix. They are mandatory for the s-menu to work properly in some cases. Using macros instead of writing some of the components by hand ensures adding essential CSS classes.