{% if page.permalinks and page.permalinks.length > 1 %}
  <details class="dropdown-withArrow d-inline-block details details-reset mb-4 position-relative close-when-clicked-outside article-versions">
    <summary class="d-flex flex-items-center flex-justify-between f4 h5-mktg btn-outline-mktg btn-mktg p-2">
      <!-- GitHub.com, Enterprise Server 2.16, etc -->
      {% if process.env.FEATURE_NEW_VERSIONS %}
      <span class="d-md-none d-xl-inline-block mr-1">{{ site.data.ui.pages.article_version }}</span> {{ allVersions[currentVersion].versionTitle }}
      {% else %}
      <span class="d-md-none d-xl-inline-block mr-1">{{ site.data.ui.pages.article_version }}</span> {{ productNames[currentVersion] }}
      {% endif %}
      <svg class="arrow ml-1" width="14px" height="8px" viewBox="0 0 14 8" xml:space="preserve" fill="none" stroke="#1277eb"><path d="M1,1l6.2,6L13,1"></path></svg>
    </summary>

    <div class="nav-dropdown position-md-absolute bg-white rounded-1 px-4 py-3 top-7 box-shadow-large" style="z-index: 6; width: 210px;">
      {% for permalink in page.permalinks %}
      <a
      href="{{ permalink.href }}"
      class="d-block py-2 {% if currentPath == permalink.href %}link-blue active{% else %}link-gray-dark no-underline{% endif %}"
      >
      {% if process.env.FEATURE_NEW_VERSIONS %}
      {{ allVersions[permalink.pageVersion].versionTitle }}</a>
      {% else %}
      {{ productNames[permalink.pageVersion] }}</a>
      {% endif %}
      {% endfor %}
    </div>
  </details>
{% endif %}