JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/flowbite.min.css" />
	<script src="https://unpkg.com/[email protected]/dist/cdn.min.js" defer></script>

</head>

<body class="leading-normal tracking-normal text-gray-900" style="font-family: 'Source Sans Pro', sans-serif;">
	<button id="multiLevelDropdownButton" data-dropdown-toggle="dropdown"  type="button">Dropdown button</button>
  <!-- Dropdown menu -->
  <div id="dropdown" class="hidden">
    <ul x-data="directoryApp()" x-init="fetchDirectory()" aria-labelledby="multiLevelDropdownButton">
      <template x-for="folder in directoryNOK.folders" :key="folder.id">
        <li>
          <a x-show="!folder.pages.length" href="#" x-text="folder.name"></a>
          <div x-show="folder.pages.length" x-id="['doubleDropdownButton', 'doubleDropdown']">
            <button :id="$id('doubleDropdownButton')" :data-dropdown-toggle="$id('doubleDropdown')" data-dropdown-placement="right-start" type="button"><div x-text="folder.name"></div></button>
            <div :id="$id('doubleDropdown')" class="hidden">
              <ul :aria-labelledby="$id('doubleDropdown')">
                <template x-for="page in folder.pages" :key="page.id">
                  <li>
                    <a x-text="page.name" :href="page.url"></a>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </li>
      </template>
    </ul>
  </div>
	<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
</body>

</html>

JavaScript

const directoryApp = () => ({
	directoryNOK: {},
  directoryOK: {
    "folders": [
      {
        "id": 0, 
        "name": "Folder 1", 
        "pages": [
          {
            "id": 0, 
            "name": "Page1.1", 
            "url": "URL 1.1"
          },
          {
            "id": 1, 
            "name": "Page1.2", 
            "url": "URL 1.2"
          },
          {
            "id": 2, 
            "name": "Page1.3", 
            "url": "URL 1.3"
          },
          {
            "id": 3, 
            "name": "Page1.4", 
            "url": "URL 1.4"
          }
        ]
      }, 
      {
        "id": 1, 
        "name": "Folder 2", 
        "pages": [
          {
            "id": 1, 
            "name": "Page2.1", 
            "url": "URL 2.1"
          }
        ]
      }, 
    ]
  },
  fetchDirectory() {
    fetch('https://myjson.dit.upm.es/api/bins/aagg')
      .then(response => response.json())
      .then(data => this.directoryNOK = data);
  },
});