{% set vfTreeButton %}
<button class="vf-button vf-tree__button" {% if item.expanded == true %}aria-expanded="true"{% endif %} data-vf-js-tree--button>
  <p data-vf-js-tree-button-hidden-text class="vf-u-sr-only">
    {{ button_hidden_open_text }}
  </p>
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.5,12a2.3,2.3,0,0,1-.78,1.729L7.568,23.54a1.847,1.847,0,0,1-2.439-2.773l9.752-8.579a.25.25,0,0,0,0-.376L5.129,3.233A1.847,1.847,0,0,1,7.568.46l11.148,9.808A2.31,2.31,0,0,1,19.5,12Z"/></svg>
</button>
{% endset %}

{% macro vfTreeList(list, currentDepth=1) %}
  <ul class="vf-tree__list {% if currentDepth > 1 %}vf-tree__list--additional{% endif %} vf-tree__list--{{ currentDepth }} | vf-list" aria-role="{% if currentDepth == 1 %}tree{% else %}group{% endif %}">
  {% for item in list %}
    <li class="vf-tree__item {%- if item.selected == true %} vf-tree__item--selected{% endif -%}{% if item.expanded == true %} | vf-tree__item--expanded{% endif -%}" data-vf-js-tree--collapsed="{{ not item.expanded }}" data-vf-js-tree aria-role="treeitem" aria-expanded="{{item.expanded}}">
      <a href="{{ tree_example_href }}" class="vf-tree__link" {%- if item.artiveTrail == true %} aria-current="page"{% endif %}>{{ item.title }} {% if item.sublist %}{{ vfTreeButton }}{% endif %}</a>
      {% if item.sublist %}
        {{ vfTreeList(item.sublist, currentDepth+1) }}
      {% endif %}
    </li>
  {% endfor %}
  </ul>
{% endmacro %}

<div class="vf-tree{% if expanded === false %} vf-tree--collapsed{% endif %}" data-vf-js-tree {% if expanded === false %}data-vf-js-tree--collapsed="true"{% endif %} aria-expanded="{{expanded}}" data-vf-js-button-hidden-open-text="{{ button_hidden_open_text }}" data-vf-js-button-hidden-close-text="{{ button_hidden_close_text }}">
  <div class="vf-tree__inner">

    {{ vfTreeList(vf_tree_list) }}

  </div>
</div>