main_navigation_mobile¶

The main_navigation_mobile macro is used to render the main navigation menu for mobile devices. Internally it uses s-menu-open-external-action-button and s-menu webcomponents.

Definition¶

{% main_navigation_mobile(options) %}

Input parameters¶

options¶

object represents an object of main mobile navigation configuration options

Option key	Type	Default	Required	Description
options.cssClasses	`string`	""	no	The list of classes that will be added to the main mobile navigation container

Example¶

Render the mobile main navigation with responsive visibility classes:

{% from "@macros/main_navigation_mobile.twig" import main_navigation_mobile %}

{{ main_navigation_mobile({
    cssClasses: 'hidden-sm-only hidden-md-only hidden-lg-only hidden-xl-only hidden-xxl-only hidden-xxxl-only'
}) }}

The above cssClasses ensure that the navigation is only visible on screens smaller than 576px (mobile devices).
For more information about responsive utility classes, see Responsiveness.

Macro source code¶

{% macro main_navigation_mobile(options) %}
    {% from "@macros/icon.twig" import icon %}

    <s-menu-open-external-action-button
            lazy="s-menu"
            targetId="header-nav"
            class="{{ options.cssClasses }}">
        <div class="labeled-icon" aria-label="{{ translate('Menu') }}">
            {{ icon('icon-menu', {
                classNames: ['labeled-icon__icon']
            }) }}
            <div class="labeled-icon__signature" aria-hidden="true">{{ translate('Menu') }}</div>
        </div>
    </s-menu-open-external-action-button>
{% endmacro %}

Webcomponents reference¶

Macros reference¶

icon