Skip to content

side_menu_category

The side_menu_category macro renders a single category item in the side menu, including its subcategories if needed.

Definition

{% side_menu_category(category, activeCategory, options) %}

Input parameters

category

CategoryObject of Category type representing a single category to render.

activeCategory

Category Object of Category type representing the currently active category.

options

object represents an object of side menu category options:

Option key Type Default Required Description
options.level number 1 no Nesting level of a category in the tree (e.g. 1 for top-level categories).
options.showAllSubcategories boolean false no If set to true, displays all subcategories regardless of the active category.
options.activeCategoryParent Category null no Object of Category type, parent of the active category.
options.activeCategoryGrandparent Category null no Object of Category type, grandparent of the active category.

Example

In this example, we render a category and its subcategories, highlighting the active category and its ancestors.
To get the required variables, we use the getCategories() and getCategory() methods from ObjectApi.
The category_id variable is available in all contexts and is used to determine the currently active category.

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

{% set categories = ObjectApi.getCategories(true) %}
{% set activeCategory = ObjectApi.getCategory(category_id) %}
{% set activeCategoryParent = ObjectApi.getCategory(activeCategory.parentId) %}
{% set activeCategoryGrandparent = ObjectApi.getCategory(activeCategoryParent.parentId) %}

<ul class="side-menu-categories__list side-menu-categories__list-level-1">
    {% for category in categories %}
        {{ side_menu_category(category, activeCategory, {
            level: 1,
            showAllSubcategories: 1,
            activeCategoryParent: activeCategoryParent,
            activeCategoryGrandparent: activeCategoryGrandparent
        }) }}
    {% endfor %}
</ul>

Macro source code

{% macro side_menu_category(category, activeCategory, options) %}
    {% set isActive = category.id == activeCategory.id %}

    {% set
        isAncestorOfActiveCategory =
            options.activeCategoryGrandparent.id == category.id or
            options.activeCategoryParent.id == category.id
    %}

    {% set shouldShowSubcategories = options.showAllSubcategories or isAncestorOfActiveCategory or isActive %}

    <li
        class="
            side-menu-categories__list-item
            side-menu-categories__list-level-{{ options.level }}
            {% if isActive %} side-menu-categories__list-item-link_active {% endif %}
        "
        {% if isActive %} aria-current="page" {% endif %}
    >
        {% if isActive %}
            <span class="side-menu-categories__list-item-link side-menu-categories__list-item-link_active">
                {{ category.name }}
            </span>
        {% else %}
            <a href="{{ category.url }}" class="side-menu-categories__list-item-link  link link_secondary link_no-underline">
                {{ category.name }}
            </a>
        {% endif %}

        {% if shouldShowSubcategories %}
            {% set newLevel = options.level + 1 %}

            <ul class="side-menu-categories__list-level-{{ newLevel }}">
                {% for subcategory in category.subcategories %}
                    {{
                        _self.side_menu_category(subcategory, activeCategory, {
                            level: newLevel,
                            showAllSubcategories: options.showAllSubcategories,
                            activeCategoryParent: options.activeCategoryParent,
                            activeCategoryGrandparent: options.activeCategoryGrandparent
                        })
                    }}
                {% endfor %}
            </ul>
        {% endif %}
    </li>
{% endmacro %}

Used styles

Objects reference