demo/examples/multiple-apis/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ReDoc Demo: Multiple apis</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
        margin: 0;
        padding-top: 40px;
      }

      nav {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
      }
      ul#links_container {
          margin: 0;
          padding: 0;
          background-color: #0033a0;
      }

      li {
          display: inline-block;
          padding: 10px;
          color: white;
          cursor: pointer;
      }
    </style>
  </head>
  <body>

    <!-- Top navigation placeholder -->
    <nav>
      <ul id="links_container">
      </ul>
    </nav>

    <redoc scroll-y-offset="body > nav"></redoc>

    <script src="https://rebilly.github.io/ReDoc/releases/v1.x.x/redoc.min.js"> </script>
    <script>
      // list of APIS
      var apis = [
        {
          name: 'PetStore',
          url: 'https://rebilly.github.io/ReDoc/swagger.yaml'
        },
        {
          name: 'Instagram',
          url: 'https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml'
        },
        {
          name: 'Google Calendar',
          url: 'https://api.apis.guru/v2/specs/googleapis.com/calendar/v3/swagger.yaml'
        }
      ];

      // initially render first API
      Redoc.init(apis[0].url);

      function onClick() {
        var url = this.getAttribute('data-link');
        Redoc.init(url);
      }

      // dynamically building navigation items
      var $list = document.getElementById('links_container');
      apis.forEach(function(api) {
        var $listitem = document.createElement('li');
        $listitem.setAttribute('data-link', api.url);
        $listitem.innerText = api.name;
        $listitem.addEventListener('click', onClick);
        $list.appendChild($listitem);
      });
    </script>
  </body>
</html>