menu_toggle_action_button¶

The menu_toggle_action_button macro is used to render a button that toggles a menu with a specific category or subcategory. It renders a webcomponent that requires the usage of this macro within a menu context.

Definition¶

{% macro menu_toggle_action_button(options) %}

Input parameters¶

options¶

options parameter represents an object of "toggle" button attributes:

Option key	Type	Default	Required	Description
options.toggleId	`string`	""	yes	Unique id of the button
options.level	`string`	""	no	Level of nesting for a specific category. For example, a button that toggles menu from a navbar has a level of `1`, a button that toggles a menu inside menu opened from a navbar has level `2` and it's subcategories have level `3`.
options.name	`string`	""	no	Text rendered inside the toggle button
options.classList	`string`	""	no	List of css classes that will be appended to toggle action button
options.icon	`object`	""	no	Object with options for the icon inside the button

options.icon¶

icon is one of options parameter fields which itself is an object contains fields described in the table below.

Option key	Type	Default	Required	Description
options.icon.position	`left` or `right`	`right`	no	A horizontal position of an icon in relation to the text on the button
options.icon.orientation	`up` or `down`	`down`	no	A type of an icon. `up` means that the rendered icon when the menu is closed will be an upwards arrow and `down` means a downwards arrow

Example¶

In this example we render a menu toggle action button with custom classes and text that is placed in the navbar.

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

{{ menu_toggle_action_button({
    toggleId: "my-unique-menu-toggle-button-1",
    classList: "menu__list-link menu__list-link_toggle",
    level: 1,
    name: "Foto, RTV-AGD"
}) }}

Macro source code¶

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

    {% set iconOrientation = options.icon.orientation ?: 'down' %}
    {% set iconPosition = options.icon.position ?: 'right' %}

    {% set iconName = 'icon-chevron-' ~ iconOrientation %}
    {% set iconPositionClass = 'menu-action-button__icon_' ~ iconPosition %}

    {% set toggleActionButtonContent = options.name|slice(0, 35) ~ "#{options.name|length > 35 ? '...' : ''}" %}

    {% if options.url %}
        <a class="link_regular link_no-underline" href="{{ options.url }}">
    {% endif %}
        <s-menu-toggle-action-button
            class="
                js__menu-item
                js__menu-toggle-action-button
                menu-action-button
                menu-action-button_toggle
                js__item-to-aggregate
                {% if options.classList %}
                    {{ options.classList|join(' ') }}
                {% endif %}
            "
            aria-controls="{{ options.toggleId }}"
            aria-expanded="false"
            toggleId="{{ options.toggleId }}"
            contentLevel="{{ options.level }}"
        >
                {{ translate(toggleActionButtonContent) }}

                {{ icon(iconName, {
                    classNames: ['menu-action-button__icon', iconPositionClass, 'list-items-aggregator__icon']
                }) }}

        </s-menu-toggle-action-button>
    {% if options.url %}
        </a>
    {% endif %}
{% endmacro %}

Webcomponents reference¶

s-menu-toggle-action-button