Skip to content

menu_content_info

The menu_content_info macro is used to display a top content with informations and links regarding a currently opened menu.

Definition

{% menu_content_info(options) %}

Input parameters

options

options represents an object of menu content info attributes

Option key Type Default Required Description
options.activeContentNameClassList string "" no List of classes that will be added to the element holding the name of the currently active category or subcategory
options.activeContentLinkClassList string "" no List of classes that will be added to the element holding the link to the list the currently active category or subcategory
options.currentContent object null no An object of current category link, which can be different from an active category. For example this macro could be placed in a container that has a link for "T-Shirts" category. However after selecting one of "T-Shirts" subcategories, such subcategory would become an active category itself. In such case if we want to display a link for the "T-Shirts" we need to use currentContent.

options.currentContent

An object of current category link, which can be different from an active category. For example this macro could be placed in a container that has a link for "T-Shirts" category. However after selecting one of "T-Shirts" subcategories, such subcategory would become an active category itself. In such case if we want to display a link for the "T-Shirts" we need to use currentContent.

Option key Type Default Required Description
options.currentContent.url string "" yes Url to the current category
options.currentContent.title string "" yes Title of the current category
options.currentContent.classList string "" no List of classes that will be added to the current content link

Example

In this example we render a basic menu content info

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

{{ menu_content_info() }}

Example

In this example we render a menu content info with additional classes for an active content name and link that allow users to see those elements only on mobile devices

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

{{ menu_content_info({
    activeContentNameClassList: 'visible-xs-only',
    activeContentLinkClassList: 'visible-xs-only'
}) }}

Example

In this example we render a menu content info with an additional current content visible on all devices but mobile with a custom link

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

{{ menu_content_info({
    currentContent: {
        classList: 'hidden-xs-only',
        url: '/path/to/category-1',
        title: 'Category 1'
    }
}) }}

Macro source code

{% macro menu_content_info(options) %}
    <div class="menu__content-info menu-content-info">
        <s-menu-active-content-name class="menu-content-info__name {%if options.activeContentNameClassList %} {{ options.activeContentNameClassList|join(' ') }} {% endif %}"></s-menu-active-content-name>

        <s-menu-active-content-link class="menu-content-info__link {%if options.activeContentLinkClassList %} {{ options.activeContentLinkClassList|join(' ') }} {% endif %}"></s-menu-active-content-link>

        {% if options.currentContent is defined %}
            <a
                href="{{ options.currentContent.url }}"
                title="{{ options.currentContent.title }}"
                class="{%if options.currentContent.classList %} {{ options.currentContent.classList|join(' ') }} {% endif %} menu-content-info__link link">
                    {{ translate('All from') }}
                    {{ options.currentContent.title|slice(0, 46) }}{% if options.currentContent.title|length > 46 %}...{% endif %}
            </a>
        {% endif %}
    </div>
{% endmacro %}

Webcomponents reference