wc-bootstrap/templates/global/category-tree-node.html.twig

{#
 # Single Category Tree Node (recursive)
 #
 # Renders one category with optional collapsible children.
 # Included recursively by category-tree.html.twig.
 #
 # Expected context:
 #   node  - Category node from wc_bootstrap_get_category_tree()
 #   level - Current nesting depth (1-3)
 #
 # @package WcBootstrap
 # @since 0.1.7
 #}

<li class="list-group-item px-0 py-1 border-0">
    <div class="d-flex align-items-center">
        <a href="{{ node.url }}"
           class="category-tree-link d-block text-decoration-none py-1 px-2 rounded flex-grow-1{% if node.is_active %} active fw-semibold{% endif %}"
           {% if node.is_active %}aria-current="page"{% endif %}>
            <span class="ps-{{ (level - 1) * 2 }}">
                {{ node.name }}
            </span>
            <span class="badge bg-body-secondary text-body-secondary rounded-pill ms-1 small">{{ node.count }}</span>
        </a>
        {% if node.children is not empty %}
            <button class="btn btn-sm btn-link text-body-secondary p-0 ms-1 category-tree-toggle"
                    type="button"
                    data-bs-toggle="collapse"
                    data-bs-target="#cat-{{ node.term_id }}"
                    aria-expanded="{{ node.is_active or node.is_ancestor ? 'true' : 'false' }}"
                    aria-controls="cat-{{ node.term_id }}"
                    aria-label="{{ __('Toggle subcategories', 'wc-bootstrap') }}">
                <i class="bi bi-chevron-down small" aria-hidden="true"></i>
            </button>
        {% endif %}
    </div>

    {% if node.children is not empty %}
        <ul class="list-group list-group-flush collapse{{ node.is_active or node.is_ancestor ? ' show' : '' }}"
            id="cat-{{ node.term_id }}">
            {% for child in node.children %}
                {% include 'global/category-tree-node.html.twig' with { node: child, level: level + 1 } only %}
            {% endfor %}
        </ul>
    {% endif %}
</li>