<header class="docs_header">
  <div class="topbar">
    <div class="topbar-left">
      <div>
        <a href="https://royale.apache.org/">
          <img src="https://royale.apache.org/wp-content/uploads/2018/01/apache-royale-tm-logo-light.svg"/>
        </a>
      </div>
    </div>

    <div class="topbar-center">
      <!-- <div class="dropdown-wrapper"> -->
        <button class="topMenu-dropbtn">DOCS</button>
        <svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="8" height="8" class="toc-arrow-main">
            <g transform="translate(904.92214,-879.1482)"><path d="
            m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
            -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
            0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
            -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
            -174.68583 0.6895,0 26.281,25.03215 56.8701,
            55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
            -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
            -104.0616 -231.873,-231.248 z
          " fill="currentColor"></path></g></svg>
        <ul class="topMenu">
          {% include main-menu-options.html %}
        </ul>
      <!-- </div> -->
    </div>

    <div class="topbar-right">
      <div class="search-bar">
        <input class="docsearch-input" type="search" placeholder="Search docs..." autocomplete="off" spellcheck="false"/>
      </div>

      <!-- <ul class="social">
        <li class="social_li fa fa-search">
          <a href="#grve-search-modal"></a>
        </li>
        <li class="social_li fa fa-share-alt">
          <a href="#grve-socials-modal"></a>
        </li>
        <li class="social_li fa fa-th">
          <a href="#grve-toggle-menu"></a>
        </li>
      </ul> -->

    </div>
  </div>
</header>