menu_go_back_action_button¶

The menu_go_back_action_button macro is used to render a button allowing to go back inside menu tree. It renders a webcomponent that requires the usage of this macro within a menu context.

Definition¶

{% menu_go_back_action_button(options) %}

Input parameters¶

options¶

options parameter represents an object of close action button attributes

Option key	Type	Default	Required	Description
options.actionButtonId	`string`	""	yes	Unique id of the button
options.shortDescription	`boolean`	false	no	If set to `true` a short description of the go back action will be rendered instead of a detailed one
options.classList	`string`	""	no	List of css classes that will be added to the go back action button.

Example¶

In this example we render a basic menu go back action button. Remember that it is mandatory to render it within a menu context.

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

{{ menu_go_back_action_button({
    actionButtonId: 'go-back-action-button-1'
}) }}

Example¶

In this example we render a menu go back action button with short description and additional class that hides this button on mobile devices.

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

{{ menu_go_back_action_button({
    actionButton: 'go-back-action-button-2',
    shortDescription: true,
    classList: 'hidden-xs-only'
}) }}

Macro source code¶

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

    <s-menu-action-button
        action="goBack"
        actionButtonId="{{ options.actionButtonId }}"
        class="js__menu-go-back-button menu-action-button menu-action-button_go-back {% if options.classList %}{{ options.classList|join(' ') }}{% endif %}">
            {{ icon('icon-chevron-left', {
                classNames: ['menu-action-button__icon', 'menu-action-button__icon_left']
            }) }}

            <p>
                {% if options.shortDescription %}
                    Powrót
                {% else %}
                    Wróć do: <s-menu-previous-content-name></s-menu-previous-content-name>
                {% endif %}
            </p>
    </s-menu-action-button>
{% endmacro %}